Vue3 uni-app watch 监听不到、不生效

有这么一个场景，A页面跳转到B页面，然后A页面监听了一个Store，然后B页面修改Store，再切回来，A页面竟然监听不到？

他喵 🐱 的，watch了半天，不生效，不知道什么鬼。

watch(
  [
    pickTicketStore.ship,
    userStore.user,
    pickTicketStore.isOnlySupportManualPay,
  ],
  ([ship, user, isOnlySupportManualPay]) => {
    // Do something with ship, user, isOnlySupportManualPay
  },
  { immediate: true }
);

这里面有两个坑的点：

1. 原来的watch是值，非响应式追踪。要改成箭头函数，这个时候watch的是getter，是响应式依赖。Vue只能追踪getter的响应式，而不能追踪一次性取值的普通对象
2. {deep: true}。默认情况下，watch只会监听对象的引用变化，而不会监听对象内部属性的变化。如果要监听对象内部属性的变化，需要设置deep: true。

watch(
  [() => detail, () => userStore.user, () => pickTicketStore.ship],
  ([detail, user, ship]) => {
    // Do something with detail, user, ship
  },
  { immediate: true, deep: true }
);

展开解释：

• detail、userStore.user、pickTicketStore.ship 这三个值在 watch 注册时就被解包了

• watch 拿到的是「这三个值的当前快照」

• 它并不会去追踪这些值内部的响应式变化，因为没有{deep: true}

写法	Vue 在监听什么	能捕捉到什么变化
watch(obj)	只看 obj 这个引用	只有重新赋值时触发
watch(() => obj.x)	看 obj.x 这个属性	属性变化也触发
watch(() => obj, { deep: true })	看 obj 及其内部所有属性	任意内部属性变化都触发