Vue gettser setter 解剖 v2.5.17

84 阅读 0 评论 56 点赞

我是靠谱客的博主能干金针菇，最近开发中收集的这篇文章主要介绍Vue gettser setter 解剖 v2.5.17，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

背景（可略过）

项目中的一个字段改变的问题，在vuex、props中值都已经改变了，但是组件却没有更新渲染，听同事说是二次透传的问题，不过写了个demo试了下，发现并不是这个原因造成的。于是开始了漫长的源码研究之旅。或许是我的效率太低下，也是短短续续，研究了挺长时间的。现在看来是比较明显的bug了，但是这次也算是实实在在debug了一次vue源码，记录一下。

demo

最好的方法莫过于带着问题看原理了，这里用3种方式改变了countObj的值：

test1()是最普通的方式直接赋值
test2()、test4()是为了测试新增属性的响应效果
test3()是还原的是本次遇到的问题：其实也是重置对象，增加属性了

但是demo里面展示的结果表明，test2()虽然新增了属性，但是可以响应更新视图；而test3()将新增属性的执行放到$nextTick中就不行了。这个也很令人疑惑。这是本篇解剖的重点，如果下面这个gif的结果都和你预测的相同，那么……大神！如有分析不对的地方，敬请指正！！

demo

<!-- html -->
<div id="app">
  <div>
    <Test1 :count-obj="countObj" :test1="test1" :test2="test2" :test3="test3" :test4="test4" />
  </div>
</div>

/* js */
Vue.component('Test1', {
  props: ['countObj', 'test1', 'test2', 'test3', 'test4'],
  template: `
    <div>
      <button @click="test1">test1</button>
      <button @click="test2">test2</button>
      <button @click="test3">test3</button>
      <button @click="test4">test4</button>
      <Test2 :countObj="countObj"></Test2>
    </div>
  `
})

Vue.component('Test2', {
  props: ['countObj'],
  template: `
    <div>
      <p>count: {{countObj.count + ''}}</p>
      <p>test: {{countObj.test + ''}}</p>
    </div>
  `
})

new Vue({
  el: '#app',
  data: function () {
    return {
      countObj: {
        count: 1
      }
    }
  },
  methods: {
    test1(){
      this.countObj.count += 1
    },
    test2(){
      var oldVal = this.countObj.count
      this.countObj = {}
      this.countObj.count = oldVal + 1
    },
    test3(){
      var oldVal = this.countObj.count
      this.countObj = {}
      this.$nextTick(() => {
        this.countObj.count = oldVal + 1
      })
    },
    test4(){
      this.countObj.test = this.countObj.count
    },
  }
})

解剖方法

看源码固然直击根源，但是多个模块间复杂的调用关系对于源码新手来说恐怕是剪不断理还乱的。这里直接采取由现象找原因的方法，直接debug定位究竟哪个方法更新了视图？漫长的追本溯源过程此处不表，下面直接给出响应式的几个重要方法，便于小伙伴们之后定位问题。

defineReactive
Object.defineProperty(…) 是响应式的本源，尤其是 reactiveSetter(…) ，会调用 notify(…)，进而引发一系列的更新行为
nextTick
下一次 eventLoop 进行更新操作
updateComponent
更新行为的开始，会重新计算 props，赋值会触发 reactiveSetter(…)

解剖

Vue 官方文档已明确说明：

Vue 不能检测对象属性的添加或删除

所以第一反应 test2() 中 count 的更改应该是不会渲染到视图中的，但是结果却……啪啪打脸。Why？我们在 reactiveSetter 中打个断点：（条件断点可以从茫茫堆栈中拯救你！）

debug

这样就已经很明了了：

this.countObj = {} 会触发 reactiveSetter，等待 nextTick updateComponent
接着执行 this.countObj.count = oldVal + 1 因为 macroTimerFunc 是下一个 eventLoop 的，所以此时 count 的值已经改变
下一个 eventLoop，macroTimerFunc 触发 updateComponent，进而 updateChildComponent 时调用 props[key] = validateProp(key, propOptions, propsData, vm)
触发 Test1.countObj 和 Test2.countObj 的 reactiveSetter，进而更新视图

这也解释了为什么执行 test3() 视图不会更新，因为：

同上1
执行 this.$nextTick(...) ，$nextTick 的回调 push 进 callbacks，在 flushSchedulerQueue 之后；并且 pending 为 true，所以不会新增一个 macroTimerFunc
同上3
同上4
执行 this.countObj.count = oldVal + 1，所以不会再更新视图了

而执行过 test2() 再执行 test1() 视图不更新，是因为：