vue3.0---computed计算属性

1.踩的坑，初始化定义num1里，没有写ref,因为不习惯 ，因为忘记了。
所以在computed里的回调函数时，直接使用return num1+num2.居然没报错。我还以为，方法更新了，天真的当写到addFn里的增加方法时，发现直接给num1++并不能生效。直接报错“Cannot create property ‘value’ on number ‘100’”不能读取数值型100的值。天呀。我才意识到自己没有给num1使用ref。

<template>
<div>{{addNum}}</div>
<div><button @click="addFn">加1</button></div>

</template>
<script>

import { defineComponent, ref, reactive, toRefs, computed } from "vue";
// computed 计算属性
export default defineComponent({
  name: "home",
  setup(props, ctx) {
    let num1 = ref(100);
    let num2 = ref(20);
    // computed计算属性使用场景：当数据需要连动时，比如购物车里的总值会随着勾选的商品数量变化而变化
    let addNum = computed(()=>{
      //computed内部是一个回调函数，需要return一个值
      return num1.value+num2.value
    })
    let addFn=()=>{
      num1.value++
      num2.value++
    }
    return {
      num1,
      num2,
      addNum,
      addFn
    };
  },
});
</script>
<style scoped lang="scss">
</style>