Vue--$watch()源码分析

 1  //----/VUE.JS
 2           const v = new Vue({
 3             data:{
 4               a:1,
 5               b:{
 6                 c:3
 7               }
 8             }
 9           })
10           // 实例方法$watch，监听属性"a"
11           v.$watch("a",()=>console.log("你修改了a"))
12                         //当Vue实例上的a变化时$watch的回调
13           setTimeout(()=>{
14             v.a = 2
15             // 设置定时器，修改a
16           },1000)

 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   }

1 //首先我们实例化Vue对象
2 var vm = Vue({
3    data:{
4        a:1, 
5        msg:‘今天学习watch‘      
6      } 
7 })
8 console.log(vm.msg) //打印 ‘今天学习watch‘
9 // 理论上来说，msg和a，应该是data上的属性，但是却可以通过vm.msg直接拿到

 1      class  Observer{  //对象Observer
 2             constructor(value) {//value 就是Vue实例上的data
 3               this.value = value
 4               this.dep = new Dep()
 5               //Dep对象是联络Watcher对象和触发监听回调的对象，稍后会有描述
 6               this.walk(value)
 7             }
 8             //递归。。让每个字属性可以observe
 9             walk(value){
10               Object.keys(value).forEach(key=>this.convert(key,value[key]))
11             }
12             convert(key, val){ //这里的 key value 是Vue实例data的每个键值对
13               defineReactive(this.value, key, val)//this.value 就是Vue实例的data
14             }
15           }
16 
17 
18 
19 
20           function defineReactive (obj, key, val) {//类似_proxy方法，循环增加set和get方法，只不过增加了Dep对象和递归的方法
               var dep = new Dep()
21             var childOb = observe(val)
22             //这里的val已经是第一次传入的对象所包含的属性或者对象，会在observe进行筛选，决定是否继续递归
23             Object.defineProperty(obj, key, {//这个defineProperty方法，作用对象是每次递归传入的对象，会在Observer对象中进行分化
24               enumerable: true,
25               configurable: true,
26               get: ()=>{
27                 if(Dep.target){//这里判断是否开启监听模式（调用watch）
28                   dep.addSub(Dep.target)//调用了，则增加一个Watcher对象
29                 }
30                 return val//没有启用监听，返回正常应该返回val
31               },
32               set:newVal=> {var value =  val
33                 if (newVal === value) {//新值和旧值相同的话，return
34                   return
35                 }
36                 val = newVal
37                 childOb = observe(newVal)
38 　　　　　　　　　　//这里增加observe方法的原因是，当我们给属性赋的值也是对象的时候，同样要递归增加set和get方法
39                 dep.notify()
40 　　　　　　　　　　//这个方法是告诉watch，你该行动了
41               }
42             })
43           }
44 　　　　　　function observe (value, vm) {//递归控制函数
45 　　　　　　　if (!value || typeof value !== ‘object‘) {//这里判断是否为对象，如果不是对象，说明不需要继续递归
46               return
47             }
48             return new Observer(value)//递归
49           }

 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

 1           //-----WATCHER.JS
 2           class Watcher { // 当使用了$watch 方法之后，不管有没有监听，或者触发监听，都会执行以下方法
 3             constructor(vm, expOrFn, cb) {
 4               this.cb = cb  //调用$watch时候传进来的回调
 5               this.vm = vm
 6               this.expOrFn = expOrFn //这里的expOrFn是你要监听的属性或方法也就是$watch方法的第一个参数（为了简单起见，我们这里补考录方法，只考虑单个属性的监听）
 7               this.value = this.get()//调用自己的get方法，并拿到返回值
 8             }
 9             update(){  // 还记得Dep.notify方法里循环的update么？
10               this.run()
11             }
12             run(){//这个方法并不是实例化Watcher的时候执行的，而是监听的变量变化的时候才执行的
13               const  value = this.get()
14               if(value !==this.value){
15                 this.value = value
16                 this.cb.call(this.vm)//触发你穿进来的回调函数，call的作用，我就不说了
17               }
18             }22             get(){ //向Dep.target 赋值为 Watcher
23               Dep.target = this  //将Dep身上的target 赋值为Watcher对象
24               const value = this.vm._data[this.expOrFn];//这里拿到你要监听的值，在变化之前的数值
25               // 声明value，使用this.vm._data进行赋值，并且触发_data[a]的get事件
26               Dep.target = null
27               return value
28             }
29           }

 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           }

 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　　　　　　　　　　}