Vue3学习之第三节：setup()中使用计算属性

对，我

已于 2022-04-26 19:43:50 修改

阅读量1.5k

点赞数

分类专栏： Vue3学习文章标签： vue.js typescript

于 2022-04-20 16:54:39 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_44209082/article/details/124301390

版权

Vue3学习专栏收录该内容

7 篇文章

订阅专栏

本文探讨了在 Vue3 中如何在 setup() 函数中实现计算属性，对比了与 Vue2 中 computed 的不同，通过代码片段展示了 Vue3 中的新用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue2的方式写computed：

代码片段：

 data() {
    return {
      num1: 0,
      num2: 0,
    };
  },
  computed: {
    result() {
      return parseInt(this.num1) + parseInt(this.num2);
    },
  }

Ps: num1和num2的和等于result

在vue3中我们如何使用computed：

代码片段：

<template>
  <div class="hello">
    <h1>Vue3中使用计算属性</h1>
    <input type="text" v-model="state.num1" >
    <input type="text" v-model="state.num2" >
    {{state.result}}
  </div>
</template>
 
<script>
import { defineComponent, reactive, computed } from "vue";
export default defineComponent ({
  name: "HelloWorld",
  setup() {
    let state = reactive({
      num1: 0,
      num2: 0,
      testObj: '',
      result: computed(() => {
        return parseInt(state.num1) + parseInt(state.num2);
      }),
    });
    // 或者写个函数
    state.testObj = computed(() => {
       return testObj + '======'
    })
    return { state };
  },
});
</script>