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

r囧r小猫 2021-07-27 00:51 383阅读 0赞

### 文章目录 ###

*  Vue知识回顾与总结【三】
 *   *  vm.$watch
     *   *  vm.$watch用法回顾
         *  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` 递归当前对象的所有子属性来触发其收集依赖的功能。