Vue知识回顾与总结【三】vm.$watch

Vue知识回顾与总结【三】

vm.$watch

vm.$watch用法回顾

vm.$watch用于观察一个表达式或者computed属性在vue.js实例上的变化。
其用法如下：

vm.$watch( expOrFn , callback,[option] )

• 第一个参数expOrFn是需要监听的表达式或函数
• 第二个参数callback是监听到第一个参数变化时执行的回调函数，该回调会得到新数据newVal 和旧数据oldVal作为参数
• 第三个参数[option]是可选配置参数，可以指定deep和immediate。deep：true表示深度监听，可以发现对象内部值的变化，注意:监听数组的变化不需要此操作，immediate:true表示立即以表达式的当前值执行回调。

vm.$watch 原理

• vm.$watch 其实是对Watcher的一种封装，且看Vue源码实现

Vue.prototype.$watch  = function( expOrFn,cb,options ){
	const vm = this;
	options = options||{};
	const watcher = new Watcher( vm, expOrFn, cb, options)   //创建Watcher实例，进而实现监听功能
	if（ options.immediate）{
		cb.call( vm, watcher.value )     //  立即执行一次回调
	}
	return function unwatchFn(){      //返回一个函数unwatchFn用于取消数据观察
		watcher.teardown()                //unwatchFn的本质是将当前watcher实例从正在观察的依赖列表中移除。
	}
}

• 当exporFn 传入的参数是一个函数时，Watcher会同时观察该函数中所用到 的所有Vue.js实例上的响应式数据，当其中一个发生变化时，Watcher都会得到通知，触发回调。
• deep:true 递归当前对象的所有子属性来触发其收集依赖的功能。