Vue原理解析（九）：监听属性watch和计算属性computed实现原理

上一篇 Vue原理解析（八）：一起搞明白令人头疼的diff算法

之前的八个章节，我们按照流程介绍了vue的初始化、虚拟Dom生成、虚拟Dom转为真实Dom、深入理解响应式以及diff算法等这些核心概念，对它内部的实现原理做了分析，相信大家对vue已经有了较深入的理解。现在我们来进一步丰富对vue的认识，开启API系列之旅，介绍日常开发中经常会使用到的API的实现原理，它们主要包括以下：

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

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

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

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

  • 1. this.$watch

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

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)
  }
}
image

监听属性的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是递归的对它的子值进行依赖收集。

  • 2. this.$set

这个API已经在第七章的最后做了具体分析，大家可以前往this.$set实现原理查阅。

  • 3. this.$delete

这个API也已经在第七章的最后做了具体分析，大家可以前往this.$delete实现原理查阅。

  • 4. 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";
    }
  }
};
image

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

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

面试官微笑而又不失礼貌的问道：

  • 请问computed属性和watch属性分别什么场景使用？

怼回去：

  • 当模板中的某个值需要通过一个或多个数据计算得到时，就可以使用计算属性，还有计算属性的函数不接受参数；监听属性主要是监听某个值发生变化后，对新值去进行逻辑处理。

下一篇 Vue原理解析（十）：搞懂事件API原理及在组件库中的妙用
顺手点个赞或关注呗，找起来也方便~

分享一个笔者自己写的组件库，哪天可能会用的上了 ~ ↓

你可能会用的上的一个vue功能组件库，持续完善中...

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,029评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,395评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,570评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,535评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,650评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,850评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,006评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,747评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,207评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,536评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,683评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,342评论 4赞 330
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,964评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,772评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,004评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,401评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,566评论 2赞 349