1、watch

• watch第一个参数就是监视目标，第二个参数是一个回调函数。里面有两个参数，分别是目标的新值以及旧值。第三个参数就是用来配置深度监视以及立即监听等。

  const count= ref(0);setTimeout(() => {count.value++;
  }, 1000);watch(count, (newVal, oldVal) => {console.log("新值:", newVal, "老值:", oldVal);
  });
  

2、watchEffect

• watchEffect 只需要一个函数，无深度、立即监听{deep: true,immediate: true}

  import { defineComponent, ref, reactive, toRefs, watchEffect } from "vue";
  export default defineComponent({setup() {const state = reactive({ name: "liu", count: 20 });let count= ref(0)watchEffect(() => {console.log(state.count);console.log(count.value);});setInterval(() =>{state.count++count.value++},2000)return {...toRefs(state)}},
  });
  

执行结果首先打印一次state.count和count值（默认依赖）；然后每隔一秒，打印state.count和count值。 从上面的代码可以看出， 并没有像watch一样需要先传入依赖，watchEffect会自动收集依赖, 只要指定一个回调函数。在组件初始化时， 会先执行一次来收集依赖， 然后当收集到的依赖中数据发生变化时， 就会再次执行回调函数。