项目中使用了vue,一直在比较computed和$watch的使用场景,今天周末抽时间看了下vue中$watch的源码部分,也查阅了一些别人的文章,暂时把自己的笔记记录于此,供以后查阅:
实现一个简单的$watch:
1 const v = new Vue({ 2 data:{ 3 a: 1, 4 b: { 5 c: 3 6 } 7 } 8 }) 9 // 实例方法$watch,监听属性"a" 10 v.$watch("a",()=>console.log("你修改了a")) 11 //当Vue实例上的a变化时$watch的回调 12 setTimeout(()=>{ 13 v.a = 2 14 // 设置定时器,修改a 15 },1000)
这个过程大概分为三部分:实例化Vue、调用$watch方法、属性变化,触发回调
一、实例化Vue:面向对象的编程
1 class Vue { //Vue对象 2 constructor (options) { 3 this.$options=options; 4 let data = this._data=this.$options.data; 5 Object.keys(data).forEach(key=>this._proxy(key)); 6 // 拿到data之后,我们循环data里的所有属性,都传入代理函数中 7 observe(data,this); 8 } 9 $watch(expOrFn, cb, options){ //监听赋值方法 10 new Watcher(this, expOrFn, cb); 11 // 传入的是Vue对象 12 } 13 14 _proxy(key) { //代理赋值方法 15 // 当未开启监听的时候,属性的赋值使用的是代理赋值的方法 16 // 而其主要的作用,是当我们访问Vue.a的时候,也就是Vue实例的属性时,我们返回的是Vue.data.a的属性而不是Vue实例上的属性 17 var self = this 18 Object.defineProperty(self, key, { 19 configurable: true, 20 enumerable: true, 21 get: function proxyGetter () { 22 return self._data[key] 23 // 返回 Vue实例上data的对应属性值 24 }, 25 set: function proxySetter (val) { 26 self._data[key] = val 27 } 28 }) 29 } 30 }
注意这里的Object.defineProperty ( obj, key , option) 方法
总共参数有三个,其中option中包括 set(fn), get(fn), enumerable(boolean), configurable(boolean)
set会在obj的属性被修改的时候触发,而get是在属性被获取的时候触发,(其实属性的每次赋值,每次取值,都是调用了函数);
constructor :Vue实例的构造函数,传入参数(options)的时候,constructor 就会被调用,让Vue对象和参数data产生关联,让我们可以通过this.a 或者vm.a来访问data属性,建立关联之后,循环data的所有键名,将其传入到_proxy方法
$watch:实例化Watcher对象
_proxy:这个方法是一个代理方法,接收一个键名,作用的对象是Vue对象,
回头来看Object.defineProperty ( obj, key , option) 这个方法
1 Object.defineProperty(self, key, { 2 configurable: true, 3 enumerable: true, 4 get: function proxyGetter () { 5 return self._data[key] 6 // 返回 Vue实例上data的对应属性值 7 }, 8 set: function proxySetter (val) { 9 self._data[key] = val 10 } 11 })
这个方法的第一个Obj的参数传入的是self,也就是Vue实例本身,而get方法里,return出来的却是self._data[key], _data在上面的方法当中,已经和参数data相等了,所以当我们访问Vue.a的时候,get方法返回给我们的,是Vue._data.a。
例如:
1 var vm = Vue({ 2 data:{ 3 a:1, 4 msg:‘我是Vue实例‘ 5 } 6 }) 7 console.log(vm.msg) //打印 ‘我是Vue实例‘ 8 // 理论上来说,msg和a,应该是data上的属性,但是却可以通过vm.msg直接拿到
当我们在new Vue的时候,传进去的data很可能包括子对象,例如在使用Vue.data.a = {a1:1 , a2:2 }的时候,这种情况是十分常见的,但是刚才的_proxy函数只是循环遍历了key,如果我们要给对象的子对象增加set和get方法的时候,最好的方法就是递归;
方法也很简单,如果有属性值 == object,那么久把他的属性值拿出来,遍历一次,如果还有,继续遍历,代码如下:
1 function defineReactive (obj, key, val) {// 类似_proxy方法,循环增加set和get方法,只不过增加了Dep对象和递归的方法 2 var dep = new Dep() 3 var childOb = observe(val) 4 //这里的val已经是第一次传入的对象所包含的属性或者对象,会在observe进行筛选,决定是否继续递归 5 Object.defineProperty(obj, key, {//这个defineProperty方法,作用对象是每次递归传入的对象,会在Observer对象中进行分化 6 enumerable: true, 7 configurable: true, 8 get: ()=>{ 9 if(Dep.target){//这里判断是否开启监听模式(调用watch) 10 dep.addSub(Dep.target)//调用了,则增加一个Watcher对象 11 } 12 return val//没有启用监听,返回正常应该返回val 13 }, 14 set:newVal=> {var value = val 15 if (newVal === value) {//新值和旧值相同的话,return 16 return 17 } 18 val = newVal 19 childOb = observe(newVal) 20 //这里增加observe方法的原因是,当我们给属性赋的值也是对象的时候,同样要递归增加set和get方法 21 dep.notify() 22 //这个方法是告诉watch,你该行动了 23 } 24 }) 25 } 26 function observe (value, vm) {//递归控制函数 27 if (!value || typeof value !== ‘object‘) {//这里判断是否为对象,如果不是对象,说明不需要继续递归 28 return 29 } 30 return new Observer(value)//递归 31 }
Opserver对象是使用defineReactive方法循环给参数value设置set和get方法,同时顺便调了observe方法做了一个递归判断,看看是否要从Opserver对象开始再来一遍。
Dep起到连接的作用:
1 class Dep { 2 constructor() { 3 this.subs = [] //Watcher队列数组 4 } 5 addSub(sub){ 6 this.subs.push(sub) //增加一个Watcher 7 } 8 notify(){ 9 this.subs.forEach(sub=>sub.update()) //触发Watcher身上的update回调(也就是你传进来的回调) 10 } 11 } 12 Dep.target = null //增加一个空的target,用来存放Watcher
new Watcher:
1 class Watcher { // 当使用了$watch 方法之后,不管有没有监听,或者触发监听,都会执行以下方法 2 constructor(vm, expOrFn, cb) { 3 this.cb = cb //调用$watch时候传进来的回调 4 this.vm = vm 5 this.expOrFn = expOrFn //这里的expOrFn是你要监听的属性或方法也就是$watch方法的第一个参数(为了简单起见,我们这里补考录方法,只考虑单个属性的监听) 6 this.value = this.get()//调用自己的get方法,并拿到返回值 7 } 8 update(){ // 还记得Dep.notify方法里循环的update么? 9 this.run() 10 } 11 run(){//这个方法并不是实例化Watcher的时候执行的,而是监听的变量变化的时候才执行的 12 const value = this.get() 13 if(value !==this.value){ 14 this.value = value 15 this.cb.call(this.vm)//触发你穿进来的回调函数,call的作用,我就不说了 16 } 17 }22 get(){ //向Dep.target 赋值为 Watcher 18 Dep.target = this //将Dep身上的target 赋值为Watcher对象 19 const value = this.vm._data[this.expOrFn];//这里拿到你要监听的值,在变化之前的数值 20 // 声明value,使用this.vm._data进行赋值,并且触发_data[a]的get事件 21 Dep.target = null 22 return value 23 } 24 }
class Watcher在实例化的时候,重点在于get方法,我们来分析一下,get方法首先把Watcher对象赋值给Dep.target,随后又有一个赋值,const value = this.vm._data[this.exOrFn],之前所做的就是修改了Vue对象的data(_data)的所有属性的get和set?,而Vue对象也作为第一个参数,传给了Watcher对象,这个this.vm._data里的所有属性,在取值的时候,都会触发之前defineReactive 方法.
回过头来再看看get:
1 function defineReactive (obj, key, val) { 2 /*.......*/ 3 Object.defineProperty(obj, key, { 4 /*.......*/ 5 get: ()=>{ 6 if(Dep.target){ //触发这个get事件之前,我们刚刚对Dep.target赋值为Watcher对象 7 dep.addSub(Dep.target)//这里会把我们刚赋值的Dep.target(也就是Watcher对象)添加到监听队列里 8 } 9 return val 10 }, 11 /*.......*/ 12 } 13 }
在吧Watcher对象放再Dep.subs数组中之后,new Watcher对象所执行的任务就告一段落,此时我们有:
1.Dep.subs数组中,已经添加了一个Watcher对象,
2.Dep对象身上有notify方法,来触发subs队列中的Watcher的update方法,
3.Watcher对象身上有update方法可以调用run方法可以触发最终我们传进去的回调
那么如何触发Dep.notify方法,来层层回调,找到Watcher的run呢?
1 set:newVal=> { 2 var value = val 3 if (newVal === value) { 4 return 5 } 6 val = newVal 7 childOb = observe(newVal) 8 dep.notify()//触发Dep.subs中所有Watcher.update方法 9 }