vue3.0 实例方法$watch

1. 作用：

(1)侦听组件实例上的响应式 property 或函数计算结果的变化
(2)回调函数得到的参数为新值和旧值

2. 如何使用？

data() {
  return {
    num: 1,
    num2: 2,
    num3: {
     num4: 3,
     num5: 4
    }
  }
},
created() {
  // 顶层property 名
  this.$watch('num', (newVal, oldVal) => {})
  // 监视单个嵌套property 的函数
  this.$watch(() => this.num3.num5,(newVal, oldVal) => {})
  // 用于监视复杂表达式的函数
  this.$watch(
    () => this.num + this.num2,
    (newVal, oldVal) => {}
  )
}

3. 当侦听的值是一个对象或者数组时，对其属性或元素的任何更改都不会触发侦听器，因为它们引用相同的对象/数组?

(1)选项：deep ------ 为了发现对象内部值的变化，可以在选项参数中指定 deep: true

注意：当变更（不是替换）对象或数组并使用 deep 选项时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。

(2)选项：immediate------在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调

this.$watch('num', callback, {
  immediate: true
})

(3)选项：flush-----可以更好地控制回调的时间(可以设置为 ‘pre’、‘post’ 或 ‘sync’)

1. 默认值是 ‘pre’，指定的回调应该在渲染前被调用
2. ‘post’ 值是可以用来将回调推迟到渲染之后的。如果回调需要通过 $refs 访问更新的 DOM 或子组件，那么则使用该值。
3. flush 被设置为 ‘sync’，一旦值发生了变化，回调将被同步调用

对于 ‘pre’ 和 ‘post’，回调使用队列进行缓冲。回调只被添加到队列中一次，即使观察值变化了多次。值的中间变化将被跳过，不会传递给回调。

缓冲回调不仅可以提高性能，还有助于保证数据的一致性。在执行数据更新的代码完成之前，侦听器不会被触发。

‘sync’ 侦听器应少用，因为它们没有这些好处。

4.从 Vue 3.2.0 开始，watchPostEffect 和 watchSyncEffect 别名也可以用来让代码意图更加明显

5.副作用刷新时机 （请去官方地址查看）

https://v3.cn.vuejs.org/guide/reactivity-computed-watchers.html#%E6%B8%85%E9%99%A4%E5%89%AF%E4%BD%9C%E7%94%A8