Vue原理解析（九）：搞懂computed和watch原理，减小使用场景思考时间

时间 2019-11-06

标签 vue 原理解析 computed watch 减小使用场景思考时间栏目兴趣爱好繁體版

原文原文链接

上一篇：Vue原理解析（八）：一块儿搞明白使人头疼的diff算法html

以前的章节，咱们按照流程介绍了vue的初始化、虚拟Dom生成、虚拟Dom转为真实Dom、深刻理解响应式以及diff算法等这些核心概念，对它内部的实现作了分析，这些都是偏底层的原理。接下来咱们将介绍平常开发中常用的API的原理，进一步丰富对vue的认识，它们主要包括如下：vue

响应式相关API：this.$watch、this.$set、this.$delete面试

事件相关API：this.$on、this.$off、this.$once、this.$emit算法

生命周期相关API：this.$mount、this.$forceUpdate、this.$destroyapi

全局API：Vue.extend、Vue.nextTick、Vue.set、Vue.delete、Vue.component、Vue.use、Vue.mixin、Vue.compile、Vue.version、Vue.directive、Vue.filter数组

这一章节主要分析computed和watch属性，对于接触vue不久的朋友可能会对computed和watch有疑惑，何时使用哪一个属性留有存疑，接下来咱们将从内部实现的角度出发，完全搞懂它们分别适用的场景。缓存

this.$watch

这个API是咱们以前介绍响应式时的Watcher类的一种封装，也就是三种watcher中的user-watcher，监听属性常常会被这样使用到：bash

export default {
  watch: {
    name(newName) {...}
  }
}
复制代码

其实它只是this.$watch这个API的一种封装：闭包

export default {
  created() {
    this.$watch('name', newName => {...})
  }
}
复制代码

监听属性初始化

为何这么说，咱们首先来看下初始化时watch属性都作了什么：异步

function initState(vm) {  // 初始化全部状态时
  vm._watchers = []  // 当前实例watcher集合
  const opts = vm.$options  // 合并后的属性
  
  ... // 其余状态初始化
  
  if(opts.watch) {  // 若是有定义watch属性
    initWatch(vm, opts.watch)  // 执行初始化方法
  }
}

---------------------------------------------------------

function initWatch (vm, watch) {  // 初始化方法
  for (const key in watch) {  // 遍历watch内多个监听属性
    const handler = watch[key]  // 每个监听属性的值
    if (Array.isArray(handler)) {  // 若是该项的值为数组
      for (let i = 0; i < handler.length; i++) {
        createWatcher(vm, key, handler[i])  // 将每一项使用watcher包装
      }
    } else {
      createWatcher(vm, key, handler) // 不是数组直接使用watcher
    }
  }
}

---------------------------------------------------------

function createWatcher (vm, expOrFn, handler, options) {
  if (isPlainObject(handler)) { // 若是是对象，参数移位
    options = handler  
    handler = handler.handler
  }
  if (typeof handler === 'string') {  // 若是是字符串，表示为方法名
    handler = vm[handler]  // 获取methods内的方法
  }
  return vm.$watch(expOrFn, handler, options)  // 封装
}
复制代码

以上对监听属性的多种不一样的使用方式，都作了处理。使用示例在官网上都可找到：watch示例，这里就不作过多的介绍了。能够看到最后是调用了vm.$watch方法。

监听属性实现原理

因此咱们来看下$watch的内部实现：

Vue.prototype.$watch = function(expOrFn, cb, options = {}) {
  const vm = this
  if (isPlainObject(cb)) {  // 若是cb是对象，当手动建立监听属性时
    return createWatcher(vm, expOrFn, cb, options)
  }
  
  options.user = true  // user-watcher的标志位，传入Watcher类中
  const watcher = new Watcher(vm, expOrFn, cb, options)  // 实例化user-watcher
  
  if (options.immediate) {  // 当即执行
    cb.call(vm, watcher.value)  // 以当前值当即执行一次回调函数
  }  // watcher.value为实例化后返回的值
  
  return function unwatchFn () {  // 返回一个函数，执行取消监听
    watcher.teardown()
  }
}

---------------------------------------------------------------

export default {
  data() {
    return {
      name: 'cc'
    }  
  },
  created() {
    this.unwatch = this.$watch('name', newName => {...})
    this.unwatch()  // 取消监听
  }
}
复制代码

虽然watch内部是使用this.$watch，可是咱们也是能够手动调用this.$watch来建立监听属性的，因此第二个参数cb会出现是对象的状况。接下来设置一个标记位options.user为true，代表这是一个user-watcher。再给watch设置了immediate属性后，会将实例化后获得的值传入回调，并当即执行一次回调函数，这也是immediate的实现原理。最后的返回值是一个方法，执行后能够取消对该监听属性的监听。接下来咱们看看user-watcher是如何定义的：

class Watcher {
  constructor(vm, expOrFn, cb, options) {
    this.vm = vm
    vm._watchers.push(this)  // 添加到当前实例的watchers内
    
    if(options) {
      this.deep = !!options.deep  // 是否深度监听
      this.user = !!options.user  // 是不是user-wathcer
      this.sync = !!options.sync  // 是否同步更新
    }
    
    this.active = true  // // 派发更新的标志位
    this.cb = cb  // 回调函数
    
    if (typeof expOrFn === 'function') {  // 若是expOrFn是函数
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)  // 若是是字符串对象路径形式，返回闭包函数
    }
    
    ...
    
  }
}
复制代码

当是user-watcher时，Watcher内部是以上方式实例化的，一般状况下咱们是使用字符串的形式建立监听属性，因此首先来看下parsePath方法是干什么的：

const bailRE = /[^\w.$]/  // 得是对象路径形式，如info.name

function parsePath (path) {
  if (bailRE.test(path)) return // 不匹配对象路径形式，再见
  
  const segments = path.split('.')  // 按照点分割为数组
  
  return function (obj) {  // 闭包返回一个函数
    for (let i = 0; i < segments.length; i++) {
      if (!obj) return
      obj = obj[segments[i]]  // 依次读取到实例下对象末端的值
    }
    return obj
  }
}
复制代码

parsePath方法最终返回一个闭包方法，此时Watcher类中的this.getter就是一个函数了，再执行this.get()方法时会将this.vm传入到闭包内，补全Watcher其余的逻辑：

class Watcher {
  constructor(vm, expOrFn, cb, options) {
    
    ...
    this.getter = parsePath(expOrFn)  // 返回的方法
    
    this.value = this.get()  // 执行get
  }
  
  get() {
    pushTarget(this)  // 将当前user-watcher实例赋值给Dep.target，读取时收集它
    
    let value = this.getter.call(this.vm, this.vm)  // 将vm实例传给闭包，进行读取操做
    
    if (this.deep) {  // 若是有定义deep属性
      traverse(value)  // 进行深度监听
    }
    
    popTarget()
    return value  // 返回闭包读取到的值，参数immediate使用的就是这里的值
  }
  
  ...
  
}
复制代码

由于以前初始化已经将状态已经所有都代理到了this下，因此读取this下的属性便可，好比：

export default {
  data() {  // data的初始化先与watch
    return {
      info: {
        name: 'cc'
      }
    }
  },
  created() {
    this.$watch('info.name', newName => {...})  // 况且手动建立
  }
}
复制代码

首先读取this下的info属性，而后读取info下的name属性。你们注意，这里咱们使用了读取这个动词，因此会执行以前包装data响应式数据的get方法进行依赖收集，将依赖收集到读取到的属性的dep里，不过收集的是user-watcher，get方法最后返回闭包读取到的值。

以后就是当info.name属性被从新赋值时，走派发更新的流程，咱们这里把和render-watcher不一样之处作单独的说明，派发更新会执行Watcher内的update方法内：

class Watcher {
  constructor(vm, expOrFn, cb, options) {
    ...
  }
  
  update() {  // 执行派发更新
    if(this.sync) {  // 若是有设置sync为true
      this.run()  // 不走nextTick队列，直接执行
    } else {
      queueWatcher(this)  // 不然加入队列，异步执行run()
    }
  }
  
  run() {
    if (this.active) {
      this.getAndInvoke(this.cb)  // 传入回调函数
    }
  }
  
  getAndInvoke(cb) {
    const value = this.get()  // 从新求值
    
    if(value !== this.value || isObject(value) || this.deep) {
      const oldValue = this.value  // 缓存以前的值
      this.value = value  // 新值
      if(this.user) {  // 若是是user-watcher
        cb.call(this.vm, value, oldValue)  // 在回调内传入新值和旧值
      }
    }
  }
}
复制代码

其实这里的sync属性已经没在官网作说明了，不过咱们看到源码中仍是保留了相关代码。接下来咱们看到为何watch的回调内能够获得新值和旧值的原理，由于cb.call(this.vm, value, oldValue)这句代码的缘由，内部将新值和旧值传给了回调函数。

watch监听属性示例：
<template>  
  <div>{{name}}</div>
</template>

export default {  // App组件
  data() {
    return {
      name: 'cc'
    }
  },
  watch: {
    name(newName, oldName) {...}  // 派发新值和旧值给回调
  },
  mounted() {
    setTimeout(() => {  
      this.name = 'ww'  // 触发name的set
    }, 1000)
  }
}
复制代码

监听属性的deep深度监听原理

以前的get方法内有说明，若是有deep属性，则执行traverse方法：

const seenObjects = new Set()  // 不重复添加

function traverse (val) {
  _traverse(val, seenObjects)
  seenObjects.clear()
}

function _traverse (val, seen) {
  let i, keys
  const isA = Array.isArray(val)  // val是不是数组
  
  if ((!isA && !isObject(val))  // 若是不是array和object
        || Object.isFrozen(val)  // 或者是已经冻结对象
        || val instanceof VNode) {  // 或者是VNode实例
    return  // 再见
  }
  
  if (val.__ob__) {  // 只有object和array才有__ob__属性
    const depId = val.__ob__.dep.id  // 手动依赖收集器的id
    if (seen.has(depId)) {  // 已经有收集过
      return  // 再见
    }
    seen.add(depId)  // 没有被收集，添加
  }
  
  if (isA) {  // 是array
    i = val.length
    while (i--) {
      _traverse(val[i], seen)  // 递归触发每一项的get进行依赖收集
    }
  } 
  
  else {  // 是object
    keys = Object.keys(val)
    i = keys.length
    while (i--) {
      _traverse(val[keys[i]], seen)  // 递归触发子属性的get进行依赖收集
    }
  }
}
复制代码

看着还挺复杂，简单来讲deep的实现原理就是递归的触发数组或对象的get进行依赖收集，由于只有数组和对象才有__ob__属性，也就是咱们第七章说明的手动依赖管理器，将它们的依赖收集到Observer类里的dep内，完成deep深度监听。

watch总结：这里说明了为何watch和this.$watch的实现是一致的，以及简单解释它的原理就是为须要观察的数据建立并收集user-watcher，当数据改变时通知到user-watcher将新值和旧值传递给用户本身定义的回调函数。最后分析了定义watch时会被使用到的三个参数：sync、immediate、deep它们的实现原理。简单说明它们的实现原理就是：sync是不将watcher加入到nextTick队列而同步的更新、immediate是当即以获得的值执行一次回调函数、deep是递归的对它的子值进行依赖收集。

this.$set

这个API已经在第七章的最后作了具体分析，你们能够前往this.$set实现原理查阅。

this.$delete

这个API也已经在第七章的最后作了具体分析，你们能够前往this.$delete实现原理查阅。

computed计算属性

计算属性不是API，但它是Watcher类的最后也是最复杂的一种实例化的使用，仍是颇有必要分析的。(vue版本2.6.10)其实主要就是分析计算属性为什么能够作到当它的依赖项发生改变时才会进行从新的计算，不然当前数据是被缓存的。计算属性的值能够是对象，这个对象须要传入get和set方法，这种并不经常使用，因此这里的分析仍是介绍经常使用的函数形式，它们之间是大同小异的，不过能够减小认知负担，聚焦核心原理实现。

export default {
  computed: {
    newName: {  // 不分析这种了~
      get() {...},  // 内部会采用get属性为计算属性的值
      set() {...}
    }
  }
}
复制代码

计算属性初始化

function initState(vm) {  // 初始化全部状态时
  vm._watchers = []  // 当前实例watcher集合
  const opts = vm.$options  // 合并后的属性
  
  ... // 其余状态初始化
  
  if(opts.computed) {  // 若是有定义计算属性
    initComputed(vm, opts.computed)  // 进行初始化
  }
  ...
}

---------------------------------------------------------------------------

function initComputed(vm, computed) {
  const watchers = vm._computedWatchers = Object.create(null) // 建立一个纯净对象
  
  for(const key in computed) {
    const getter = computed[key]  // computed每项对应的回调函数
    
    watchers[key] = new Watcher(vm, getter, noop, {lazy: true})  // 实例化computed-watcher
    
    ...
    
  }
}
复制代码

计算属性实现原理

这里仍是按照惯例，将定义的computed属性的每一项使用Watcher类进行实例化，不过这里是按照computed-watcher的形式，来看下如何实例化的：

class Watcher{
  constructor(vm, expOrFn, cb, options) {
    this.vm = vm
    this._watchers.push(this)
    
    if(options) {
      this.lazy = !!options.lazy  // 表示是computed
    }
    
    this.dirty = this.lazy  // dirty为标记位，表示是否对computed计算
    
    this.getter = expOrFn  // computed的回调函数
    
    this.value = undefined
  }
}
复制代码

这里就点到为止，实例化已经结束了。并无和以前render-watcher以及user-watcher那般，执行get方法，这是为何？咱们接着分析为什么如此，补全以前初始化computed的方法：

function initComputed(vm, computed) {
  ...
  
  for(const key in computed) {
    const getter = computed[key]  // // computed每项对应的回调函数
    ...
    
    if (!(key in vm)) {
      defineComputed(vm, key, getter)
    }
    
    ... key不能和data里的属性重名
    ... key不能和props里的属性重名
  }
}
复制代码

这里的App组件在执行extend建立子组件的构造函数时，已经将key挂载到vm的原型中了，不过以前也是执行的defineComputed方法，因此不妨碍咱们看它作了什么：

function defineComputed(target, key) {
  ...
  Object.defineProperty(target, key, {
    enumerable: true,
    configurable: true,
    get: createComputedGetter(key),
    set: noop
  })
}
复制代码

这个方法的做用就是让computed成为一个响应式数据，并定义它的get属性，也就是说当页面执行渲染访问到computed时，才会触发get而后执行createComputedGetter方法，因此以前的点到为止再这里会续上，看下get方法是怎么定义的：

function createComputedGetter (key) { // 高阶函数
  return function () {  // 返回函数
    const watcher = this._computedWatchers && this._computedWatchers[key]
    // 原来this还能够这样用，获得key对应的computed-watcher
    
    if (watcher) {
      if (watcher.dirty) {  // 在实例化watcher时为true，表示须要计算
        watcher.evaluate()  // 进行计算属性的求值
      }
      if (Dep.target) {  // 当前的watcher，这里是页面渲染触发的这个方法，因此为render-watcher
        watcher.depend()  // 收集当前watcher
      }
      return watcher.value  // 返回求到的值或以前缓存的值
    }
  }
}

------------------------------------------------------------------------------------

class Watcher {
  ...
  
  evaluate () {
    this.value = this.get()  //  计算属性求值
    this.dirty = false  // 表示计算属性已经计算，不须要再计算
  }
  
  depend () {
    let i = this.deps.length  // deps内是计算属性内能访问到的响应式数据的dep的数组集合
    while (i--) {
      this.deps[i].depend()  // 让每一个dep收集当前的render-watcher
    }
  }
}
复制代码

这里的变量watcher就是以前computed对应的computed-watcher实例，接下来会执行Watcher类专门为计算属性定义的两个方法，在执行evaluate方法进行求值的过程当中又会触发computed内能够访问到的响应式数据的get，它们会将当前的computed-watcher做为依赖收集到本身的dep里，计算完毕以后将dirty置为false，表示已经计算过了。

而后执行depend让计算属性内的响应式数据订阅当前的render-watcher，因此computed内的响应式数据会收集computed-watcher和render-watcher两个watcher，当computed内的状态发生变动触发set后，首先通知computed须要进行从新计算，而后通知到视图执行渲染，再渲染中会访问到computed计算后的值，最后渲染到页面。

Ps: 计算属性内的值须是响应式数据才能触发从新计算。

当computed内的响应式数据变动后触发的通知：

class Watcher {
  ...
  update() {  // 当computed内的响应式数据触发set后
    if(this.lazy) {
      this.diray = true  // 通知computed须要从新计算了
    }
    ...
  }
}
复制代码

最后仍是以一个示例结合流程图来帮你们理清楚这里的逻辑：

export default {
  data() {
    return {
      manName: "cc",
      womanName: "ww"
    };
  },
  computed: {
    newName() {
      return this.manName + ":" + this.womanName;
    }
  },
  methods: {
    changeName() {
      this.manName = "ss";
    }
  }
};
复制代码

watch总结：为何计算属性有缓存功能？由于当计算属性通过计算后，内部的标志位会代表已经计算过了，再次访问时会直接读取计算后的值；为何计算属性内的响应式数据发生变动后，计算属性会从新计算？由于内部的响应式数据会收集computed-watcher，变动后通知计算属性要进行计算，也会通知页面从新渲染，渲染时会读取到从新计算后的值。

最后按照惯例咱们仍是以一道vue可能会被问到的面试题做为本章的结束~