watchEffect 不指定式监听

不需要指定监听对象，在执行函数中使用到的数据，自动进行监听变化。默认开启 immediate、deep

import { ref, reactive, watchEffect } from "vue";
export default {
  setup() {
    let a = ref(0);
    let b = reactive({
      a: 33,
      b: {
        c: {
          d: 5,
        },
      },
    });

    //定义 watchEffect 处理函数
    watchEffect(() => {
      let xx = a;
      let xxx = b.b.c.d;
    });
  },
};

此处，当 a、b.b.c.d 两项数据变化时，自动触发 watchEffect 中定义的执行函数。

• 相比较 computed 计算属性
  • computed 必须要有返回值，watchEffect 不需要返回值
  • computed 注重的是最终生成的结果，watchEffect 注重的是回调函数中的执行过程