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
递归当前对象的所有子属性来触发其收集依赖的功能。