乐趣区

关于前端:我想用大白话讲清楚watch和computed

背景

始终以来我对 vue 中的 watchcomputed都只知其一; 不知其二的,晓得一点 (例如:watchcomputed的实质都是 new Watcher,computed 有缓存,只有调用的时候才会执行,也只有当依赖的数据变动了,才会再次触发 …),而后就没有而后了。

也看了很多大佬写的文章,一大段一大段的源码列出来,着实让我这个菜鸡看的头大,天然也就不想看了。最近,我又开始学习 vue 源码,才真正了解了它们的实现原理。

data() {
  return {
    msg: 'hello guys',
    info: {age:'18'},
    name: 'FinGet'
  }
}

watcher

watcher 是什么?侦听器?它就是个类class!

class Watcher{constructor(vm,exprOrFn,callback,options,isRenderWatcher){}}
  • vm vue 实例
  • exprOrFn 可能是字符串或者回调函数(有点懵就往后看,当初它不重要)
  • options 各种配置项(配置啥,往后看)
  • isRenderWatcher 是否是 渲染Wathcer

initState

Vue 初始化中 会执行一个 initState办法,其中有大家最相熟的 initData, 就是Object.defineProperty 数据劫持。

export function initState(vm) {
  const opts = vm.$options;
  // vue 的数据起源 属性 办法 数据 计算属性 watch
  if(opts.props) {initProps(vm);
  }
  if(opts.methods) {initMethod(vm);
  }
  if(opts.data) {initData(vm);
  }
  if(opts.computed){initComputed(vm);
  }
  if(opts.watch) {initWatch(vm, opts.watch);
  }
}

在数据劫持中,Watcher的好基友 Dep 呈现了,Dep就是为了把 Watcher 存起来。

function defineReactive(data, key, val) {let dep = new Dep(); 
  Object.defineProperty(data, key, {get(){if(Dep.target) {dep.depend(); // 收集依赖
      }
      return val;
    },
    set(newVal) {if(newVal === val) return;
      val = newVal;
      dep.notify(); // 告诉执行}
  })
}

initData 的时候,Dep.target啥也不是,所以收集了个寂寞。target是绑在 Dep 这个类上的(动态属性),不是实例上的。

然而当 $mount 之后,就不一样了。至于 $mount 中执行的什么 compilegeneraterenderpatchdiff 都不是本文关注的,不重要,绕过!

你只须要晓得一件事: 会执行上面的代码

new Watcher(vm, updateComponent, () => {}, {}, true); // true 示意他是一个渲染 watcher

updateComponent就是更新哈,不计较具体执行,它当初就是个会更新页面的 回调函数 ,它会被存在Watchergetter中。它对应的就是最开始那个 exprOrFn 参数。

嘿嘿嘿,这个时候就不一样了:

  1. 渲染页面就是调用了你定义的数据(别杠,定义了没调用),就会走get
  2. new Watcher 就会调用一个办法把这个实例放到 Dep.target 上。
pushTarget(watcher) {Dep.target = watcher;}

这两件事正好凑到一起,那么 dep.depend()就干活了。

所以到这里能够明确一件事,所有的 data 中定义的数据,只有被调用,它都会收集一个渲染 watcher, 也就是数据扭转,执行set 中的 dep.notify 就会执行渲染watcher

下图就是定义了 msginfoname 三个数据,它们都有个 渲染Watcher

眼尖的小伙伴应该看到了 msg 中还有两个 watcher, 一个是用户定义的watch, 另一个也是用户定义的watch。啊,当然不是啦,vue 是做了去重的,不会有反复的watcher, 正如你所料,另一个是computed watcher

用户 watch

咱们个别是这样应用 watch 的:

watch: {msg(newVal, oldVal){console.log('my watch',newVal, oldVal)
  }
  // or
  msg: {handler(newVal, oldVal) {console.log('my watch',newVal, oldVal)
    },
    immediate: true
  }
}

这里会执行一个 initWatch, 一顿操作之后,就是提取出exprOrFn( 这个时候它就是个字符串了 )、handleroptions, 这就和Watcher 莫名的符合了,而后就牵强附会的调用了 vm.$watch 办法。

 Vue.prototype.$watch = function(exprOrFn, cb, options = {}) {
    options.user = true; // 标记为用户 watcher
    // 外围就是创立个 watcher
    const watcher = new Watcher(this, exprOrFn, cb, options);
    if(options.immediate){cb.call(vm,watcher.value)
    }
 }

来吧,防止不了看看这段代码(原本粘贴了好长一段,但说了大白话,我就把和这段关系不大的给删减了):

class Watcher{constructor(vm,exprOrFn,callback,options,isRenderWatcher){
    this.vm = vm;
    this.callback = callback;
    this.options = options;
    if(options) {this.user = !!options.user;}
    this.id = id ++;
    if (typeof exprOrFn == 'function') {this.getter = exprOrFn; // 将外部传过来的回调函数 放到 getter 属性上} else {this.getter = parsePath(exprOrFn);
      if (!this.getter) {this.getter = (() => {});
      }
    }
    this.value = this.get();}
  get(){pushTarget(this); // 把以后 watcher 存入 dep 中
    let result = this.getter.call(this.vm, this.vm); // 渲染 watcher 的执行 这里会走到 observe 的 get 办法,而后存下这个 watcher
    popTarget(); // 再置空 当执行到这一步的时候 所以的依赖收集都实现了,都是同一个 watcher
    return result;
  }
}
// 这个就是拿来把 msg 的值取到,取到的就是 oldVal
function parsePath(path) {if (!path) {return}
  var segments = path.split('.');
  return function(obj) {for (var i = 0; i < segments.length; i++) {if (!obj) {return}
      obj = obj[segments[i]];
    }
    return obj
  }
}

大家能够看到,new Watcher会执行一下 get 办法,当是 渲染 Watcher就会渲染页面,执行一次 updateComponent, 当它是 用户 Watcher就是执行 parsePath 中的返回的办法,而后失去一个值 this.value 也就是oldVal

嘿嘿嘿,既然取值了,那又走到了 msgget外面,这个时候 dep.depend() 又干活了,用户 Watcher就存进去了。

msg 扭转的时候,这过程中还有一些骚操作,不重要哈,最初会执行一个 run 办法,调用回调函数,把 newValueoldValue传进去:

  run(){
    let oldValue = this.value;
    // 再执行一次就拿到了当初的值,会去重哈,watcher 不会反复增加
    let newValue = this.get();
    this.value = newValue;
    if(this.user && oldValue != newValue) { 
      // 是用户 watcher, 就调用 callback 也就是 handler
      this.callback(newValue, oldValue)
    }
  }

computed

computed: {c_msg() {return this.msg + 'computed'}
  // or
  c_msg: {get() {return this.msg + 'computed'},
    set() {}
  }
},

computed有什么特点:

  1. 调用的时候才会执行
  2. 有缓存
  3. 依赖扭转时会从新计算

调用的时候执行,我怎么晓得它在调用?嘿嘿嘿,Object.defineProperty不就是干这事的嘛,巧了不是。

依赖的数据扭转时会从新计算, 那就须要收集依赖了。还是那个逻辑,调用了this.msg -> get -> dep.depend()

function initComputed(vm) {
  let computed = vm.$options.computed;
  const watchers = vm._computedWatchers = {};
  for(let key in computed) {const userDef = computed[key];
    // 获取 get 办法
    const getter = typeof userDef === 'function' ? userDef : userDef.get;
    // 创立计算属性 watcher lazy 就是第一次不调用
    watchers[key] = new Watcher(vm, userDef, () => {}, { lazy: true});
    defineComputed(vm, key, userDef)
  }
}
const sharedPropertyDefinition = {
  enumerable: true,
  configurable: true,
  get: () => {},
  set: () => {}
}
function defineComputed(target, key, userDef) {if (typeof userDef === 'function') {sharedPropertyDefinition.get = createComputedGetter(key)
  } else {sharedPropertyDefinition.get = createComputedGetter(userDef.get);
      sharedPropertyDefinition.set = userDef.set;
  }
  // 应用 defineProperty 定义 这样能力做到应用才计算
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

上面这一段最重要,下面的看一眼就好,下面做的就是把 get 办法找进去,用 Object.defineProperty 绑定一下。

class Watcher{constructor(vm,exprOrFn,callback,options,isRenderWatcher){
      ... 
    this.dirty = this.lazy;
    // lazy 第一次不执行
    this.value = this.lazy ? undefined : this.get();
    ...
  }
  
  update(){if (this.lazy) {
      // 计算属性 须要更新
      this.dirty = true;
    } else if (this.sync) {this.run();
    } else {queueWatcher(this); // 这就是个陪衬 当初不论它
    }
  }
  evaluate() {this.value = this.get();
    this.dirty = false;
  }
}

缓存就在这里,执行 get 办法会拿到一个返回值 this.value 就是缓存的值,在 用户 Watcher中,它就是oldValue,写到这里的时候,对尤大神的拜服,又加深一层。????????plus!

function createComputedGetter(key) {return function computedGetter() {
    // this 指向 vue 实例
    const watcher = this._computedWatchers[key];
    if (watcher) {if (watcher.dirty) { // 如果 dirty 为 true
        watcher.evaluate();// 计算出新值,并将 dirty 更新为 false}
      // 如果依赖的值不发生变化,则返回上次计算的后果
      return watcher.value
    }
  }
}

watcherupdate 是什么时候调用的?也就是数据更新调用 dep.notify()dirty 就须要变成 true,然而计算属性还是不能马上计算,还是须要在调用的时候才计算,所以在update 的时候只是改了 dirty 的状态!而后下次调用的时候就会从新计算。

class Dep {constructor() {
    this.id = id ++;
    this.subs = [];}
  addSub(watcher) {this.subs.push(watcher);
  }
  depend() {Dep.target.addDep(this);
  }
  notify() {this.subs.forEach(watcher => watcher.update())
  }
}

总结

  1. watchcomputed 实质都是 Watcher,都被寄存在Dep 中,当数据扭转时,就执行 dep.notify 把以后对应 Dep 实例中存的 Watcherrun一下,这样执行了 渲染Watcher 页面就刷新了;
  2. 每一个数据都有本人的 Dep,如果他在模版中被调用,那它肯定有一个 渲染 Watcher
  3. initData时,是没有 Watcher 能够收集的;
  4. 发现没有,渲染 WatcherComputed 中,exprOrFn 都是函数,用户Watcher 中都是字符串。

文章中的代码是简略版的,还有很多细枝末节的货色没说,不重要也只是针对本文不重要,大家能够去浏览源码更深刻的了解。

退出移动版