Vue watch 侦听器选项 和 $watch api

watch
允许执行异步操作 (如访问一个 API)，
限制我们执行该操作的频率，并在得到最终结果前，设置中间状态。
这些都是 computed 计算属性无法做到的。

对于引用类型 默认不监听属性变化，除非设置deep选项，而 reactive 不需要设置 deep
引用类型 的newvalue 和 oldvalue 值一致
如果要监听引用类型的属性 可以用函数返回的写法

watch 需要侦听特定的数据源，并在回调函数中执行 effect。

watch 与 watchEffect 的区别：

• 懒执行副作用；
• 更具体地说明什么状态应该触发侦听器重新运行；
• 访问侦听状态变化前后的值。

用字符串确定监听对象，只能将顶层的 data、prop 或 computed 属性名作为字符串传递
对于更复杂的表达式，需要用一个函数取代

this.$watch('a', (newVal, oldVal) => {} )
// 监听嵌套属性
this.$watch(() => this.c.d, (newVal, oldVal) => {})
// 监视复杂表达式的函数
this.$watch(
// 像监听一个未被定义的计算属性
  () => this.a + this.b,
  (newVal, oldVal) => {}
)

$watch 返回一个取消侦听函数，用来停止触发回调：

const unwatch = vm.$watch('a', cb)
unwatch()

$watch option 选项参数

第三个参数 为对象

属性	作用
deep	是否对 对象的属性 进行侦听 （对象中对象的属性也会被侦听）
immediate	是否立即以表达式的当前值触发回调
flush	'pre’在渲染前调用回调（默认）, 'post’将回调推迟到渲染之后 or 'sync’一旦值发生变化，回调将被同步调用

watch 选项

对象语法

watch: {
	name1: {
		handler: function(newValue,oldValue){},
		immediate: {}
	},
	name2: {
		handler(newValue,oldValue){},
		flush : {}
	},
	name3: handler(newValue,oldValue){},
	name3(newValue,oldValue) {}
}

源码

经过一系列判断
最终会调用 doWatch

watchEffect

watchEffect 立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数

调用 watchEffect() 返回的函数可以手动停止监听 （正常会在组件卸载时停止）

onTrack 和 onTrigger 调试侦听器（仅开发模式下工作）

• onTrack 将在响应式 property 或 ref 作为依赖项被追踪时被调用。
• onTrigger 将在依赖项变更导致 effect 被触发时被调用。