Vue watch监听原理篇

学习watch原理之前需要了解更新原理

首先清楚在vue中watch有几种常见用法

let vm = new Vue({
       el:'#app',
            data(){
                return {
                    name:'123'
                }
            },
            methods:{
                a(){

                }
            },
            watch:{
            // 第一种
                 name(newVal,oldVal){
                    console.log(newVal,oldVal);
                },
             // 第二种
                name:[
                    function (newValue,oldVal){
                        console.log(newValue,oldValue);
                    },
                    function (a,b){
                        console.log(a,b);
                    }
                ],
              //第三种
                name:'a'
            }
        })
        // 第四种
        vm.$watch('name',(a,b)=>{
            console.log(a,b,'---$watch');
        })
      //更改值，监听变化
        setTimeout(()=>{
            vm.name = '455'
        },1000) 

初始化watch时 需要看一下watch的所有属性和他的值，如果他的属性是数组，需要把数组拆分开，生成多个watcher ，watcher越多，性能越不好，如果只有一个值，直接创建watcher

function initWatch(vm, watch) {
  for (let key in watch) {
    let handler = watch[key];
    if (Array.isArray(handler)) {
      for (var i = 0; i < handler.length; i++) {
        createWatcher(vm, key, handler[i]);
      }
    } else {
      createWatcher(vm, key, handler);
    }
  }
}
function createWatcher(vm, key, handler) {
  return vm.$watch(key, handler);
}

创建watcher 等价于调用vm.$watcher,$watcher核心就是创建watcher,如果用户传入immediate会，立即执行回调

function createWatcher(vm, key, handler) {
  return vm.$watch(key, handler);
}

export function stateMixin(Vue) {
  Vue.prototype.$watch = function (key, handler,options={}) {
    options.user = true;
    new Watcher(this, key,handler, options);
    if(options.immediate){
        handler(watcher.value)
    }
  };
}

进入watcher后,用户回调绑定到cb上，user属性绑定到user上，根据" . " 分割，去vm上面取值，因为需要监控这个值的变化，所以要把watcher和这个属性关联起来，默认会先去调用一次get方法，调用get时，可以拿到初始化的值，初始化的值保存到了this.value上，稍后用户更新会走run方法，run方法再次调用get方法，会拿到一个新值，有了新值和老值之后，如果是用户watcher，需要让用户传入的回调去执行，用户回调是cb

class Watcher {
  constructor(vm, exporOrFn, cb, options={}) {
    this.vm = vm;
    this.exporOrFn = exporOrFn;
    this.options = options;
    this.cb = cb;
    this.id = id++;
    this.user = !!options.user;//是否是用户调用
    this.deps = [];
    this.depsId = new Set();
    //默认应该让exportOrFn执行，exportOrFn做了什么事？去render上取值
    if (typeof exporOrFn == "string"){
      this.getter = function (){//需要将表达式转化成函数
        //当我数据取值时，会进行依赖收集
        // age.n  vm['age.n']   => vm['age']['n']
          let arr = exporOrFn.split('.');
          let obj = vm; 
          for (var i = 0;i<arr.length;i++){
            obj = obj[arr[i]]
          }
          return obj;//getter
      } 
    }else{
      this.getter = exporOrFn;
    }
      //value 值是第一次渲染的value
    this.value= this.get(); //默认初始化要取值
  }
  get() {
    //稍后用户更新时，可以重新调用getter方法
    //defineProperty.get,每个属性都可以收集自己的watcher,每个属性都有一个依赖收集的对象 dep
    //一个属性可以对应多个watcher，一个watcher也可以对应多个属性
    pushTarget(this);
    const value = this.getter();
    popTarget(this);
    return value;
  }
  run(){
    this.newValue =  this.get();
    this.oldValue = this.value
    this.value = this.newValue;//为了保证这一次的新值是下一次的老值
    if(this.user){
       this.cb.call(vm,this.newValue, this.oldValue);
    }
  }
}