computed 计算属性和 watch侦听属性

1.computed 计算属性它的功能与Vue2.0版本是一样的下发有变如下：

<template>
  <div>
    <input v-model.number="data.y" type="text" /> +
    <input v-model.number="data.z" type="text" /> =
    <input v-model="sum" type="text" />
  </div>
</template>

<script>
import { reactive, computed,} from "vue";
export default {
  name: "App",
  setup() {
    let data = reactive({
      y: 0,
      z: 0,
    });
    //方法
    let sum = computed(() => {
      //简写方式
      return data.y + data.z;
    });
    return {
      data,
      sum,
    };
  },
};
</script>

2.watch侦听属性它的功能与Vue2.0版本是一样的但是可以监听多个ref定义的数据还有两个坑点

    1.监视侦听reactive定义的响应式数据时：oldValue无法正确获取，强制开启了深度监听(deep 配置失效)
    2.监听reactive定义的响应式数据中的蒙一个属性时候：deep配置有效
   

//watch 函数可以有3个参数
    //第一个是要监视的数据名字
    //第二个是回调函数里面有newValue，oldValue两个参数
    //第三个参数可以是一个对象写{immediate: true, deep:true}

<template>
  <div>
    <input v-model.number="data.y" type="text" /> +
    <input v-model.number="data.z" type="text" /> =
    <input v-model="data.sum" type="text" />
  </div>
</template>

<script>
import { reactive, watch } from "vue";
export default {
  name: "App",
  setup(props, context) {
    let data = reactive({
      y: 0,
      z: 0,
      sum:0
    });
    //方法
    watch(data, 
         (newValue, oldValue) => {data.sum=data.y+data.z},
         //此处的deep配置无效
         {immediate: true, deep:true});
    return {
      data,
    };
  },
};
</script>


//如果需要监听reactive定义的响应式数据里面的蒙一个属性第一个参数也就是监听的属性名称要写为函数
<template>
  <div>
    <button @click="data.obj.a.b.c++">点击加一</button>
    <h2>{{ data.obj.a.b.c }}</h2>
  </div>
</template>

<script>
import { reactive, watch } from "vue";
export default {
  name: "App",
  setup(props, context) {
    let data = reactive({
      obj: { a: { b: { c: 5 } } },
    });
    //方法
    watch(
        //第一个参数固定写法箭头后面千万不能有{}
        //如果要监视里面的多个属性第一个参数要以数组方式书写 数组中使用箭头函数
        // [() => data.obj1, () => data.obj2,...],
      () => data.obj,
      (newValue, oldValue) => {
        console.log(newValue, oldValue);
      },
      //此处的deep 配置属性有效
      { deep: true }
    );
    return {
      data,
    };
  },
};
</script>