Vue 计算属性原理篇

通常我们不需要频繁的去更新模板上的属性值，则会采用computed，因为他具有缓存功能，可以提高性能。

computed有两种写法

1、
{{fullName}}
     
   let vm = new Vue({
            el:'#app',
            data(){
                return {
                    // arr:[[1,2,3]],
                    // name:'123',
                    firstName:'yan',
                    lastName:'liying'
                }
            },
            computed:{
                fullName:{
                    get(){
                        return this.firstName + this.lastName;
                    },
                    set(val){
    
                    }
                }
            },
})
2、
{{fullName}}
     
   let vm = new Vue({
            el:'#app',
            data(){
                return {
                    // arr:[[1,2,3]],
                    // name:'123',
                    firstName:'yan',
                    lastName:'liying'
                }
            },
           computed:{
                fullName(){
                    return this.firstName + this.lastName
                }
            },
})

vue中初始化computed，每一个计算属性的本质就是watcher，创建计算属性的watcher时，会传入一个懒惰属性，来控制computed缓存的功能，默认是执行的，先处理为vm._computedWatchers对象,每个key对应一个watch实例。进而能够获取到当前这个计算属性的dirty，来控制是来重新触发get，还是走上一次的缓存；

function initComputed(vm, computed) {
  for (let key in computed) {
    const userDef = computed[key];
    let watch = vm._computedWatcher = {}
    //依赖的属性变化就重新取值 get
    let getter = typeof userDef == "function" ? userDef : userDef.get;
    //每个计算属性本质就是watcher
    watch[key] = new Watcher(vm, getter, () => {}, { lazy: true }); //默认执行
    //将key定义在vm上
    defineProperty(vm, key, userDef);
  }
}
function createComputedGetter(key){
    return function computedGetter(){
        let watcher = this._computedWatcher[key];
        if(watcher.dirty){
            watcher.evaluate();
        }
        //如果当前取完值后 dep.target还有值，需要继续向上收集
        if(Dep.target){
            //计算属性watcher，firstName,lastName
            watcher.depend();//watcher对应了多个dep
            console.log(Dep.target,'---tera');
        }
        return watcher.value;
    }
}
//computed 就是一个defineProperty
function defineProperty(vm, key, userDef) {
  let sharedProperty = {};
  if(typeof userDef == 'function'){
      sharedProperty.get = userDef;
  }else{
      sharedProperty.get = createComputedGetter(key);
      sharedProperty.set = userDef.set;
  }
  Object.defineProperty(vm, key, sharedProperty)
}

watcher中的dirty默认是true，是执行状态，会触发watcher中的evaluate，方法，evaluate方法中会调用get方法，并且同时将当前的watcher中的dirty置为false，下一次不会执行。

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.lazy = !!options.lazy; //computed懒执行的flag
    this.deps = [];
    this.dirty = this.lazy;
    this.depsId = new Set();
    //默认应该让exportOrFn执行，exportOrFn做了什么事？去render上取值
    if (typeof exporOrFn == "string") {
      this.getter = function () {
        let arr = exporOrFn.split(".");
        let obj = vm;
        for (var i = 0; i < arr.length; i++) {
          obj = obj[arr[i]];
        }
        return obj;
      };
    } else {
      this.getter = exporOrFn;
    }
    //value 值是第一次渲染的value
    this.value = this.lazy ? undefined : this.get(); //默认初始化要取值
  }
  get() {
    //稍后用户更新时，可以重新调用getter方法
    //defineProperty.get,每个属性都可以收集自己的watcher,每个属性都有一个依赖收集的对象 dep
    //一个属性可以对应多个watcher，一个watcher也可以对应多个属性
    pushTarget(this);
    const value = this.getter.call(this.vm);
    popTarget(this);
    return value;
  }
  update() {
    if (this.lazy) {
      this.dirty = true;
    } else {
      //每次更新时 this 多次调用update 我希望现将watcher缓存下来，等一会一起更新
      queueWatcher(this);
    }
  }
  evaluate() {
    this.dirty = false;
    this.value = this.get();
  }
} 

总结

• 初始化 data 和 computed，分别代理其 set 和 get 方法，对 data 中的所有属性生成唯一的 dep 实例

• 对 computed 中的 属性生成唯一的 watcher，并保存在 vm._computedWatchers 中

• 访问计算属性时，设置 Dep.target 指向 计算属性的 watcher，调用该属性具体方法

• 方法中访问 data 的属性，即会调用 data 属性的 get 方法，将 data 属性的 dep 加入到 计算属性的 watcher ， 同时该 dep 中的 subs 添加这个 watcher

• 设置 data 的这个属性时，调用该属性代理的 set 方法，触发 dep 的 notify 方法

• 因为时 computed 属性，只是将 watcher 中的 dirty 设置为 true

• 最后，访问计算属性的 get 方法时，得知该属性的 watcher.dirty 为 true，则调用 watcher.evaluate() 方法获取新的值

参考：https://www.jianshu.com/p/a79806d317a4