一、watch

• 与 Vue2.x 中 watch 配置功能一致

• 两个小“坑”：

  • 监视 reactive 定义的响应式数据时：oldValue 无法正确获取、强制开启了深度监视（deep 配置失效）。
  • 监视 reactive 定义的响应式数据中某个属性时：deep 配置有效。

//情况一：监视ref定义的响应式数据
watch(
  sum,
  (newValue, oldValue) => {
    console.log("sum变化了", newValue, oldValue);
  },
  { immediate: true }
);

//情况二：监视多个ref定义的响应式数据
watch([sum, msg], (newValue, oldValue) => {
  console.log("sum或msg变化了", newValue, oldValue);
});

/* 情况三：监视reactive定义的响应式数据
          若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
          若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(
  person,
  (newValue, oldValue) => {
    console.log("person变化了", newValue, oldValue);
  },
  { immediate: true, deep: false }
); //此处的deep配置不再奏效

//情况四：监视reactive定义的响应式数据中的某个属性
watch(
  () => person.job,
  (newValue, oldValue) => {
    console.log("person的job变化了", newValue, oldValue);
  },
  { immediate: true, deep: true }
);

//情况五：监视reactive定义的响应式数据中的某些属性
watch(
  [() => person.job, () => person.name],
  (newValue, oldValue) => {
    console.log("person的job变化了", newValue, oldValue);
  },
  { immediate: true, deep: true }
);

//特殊情况
watch(
  () => person.job,
  (newValue, oldValue) => {
    console.log("person的job变化了", newValue, oldValue);
  },
  { deep: true }
); //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

二、watchEffect 函数

• watch 的套路是：既要指明监视的属性，也要指明监视的回调。

• watchEffect 的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

• watchEffect 有点像 computed：

  • 但 computed 注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
  • 而 watchEffect 更注重的是过程（回调函数的函数体），所以不用写返回值。

  //watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
  watchEffect(() => {
    const x1 = sum.value;
    const x2 = person.age;
    console.log("watchEffect配置的回调执行了");
  });