在vue的实现流程中有几点不太清楚

Question

第一步： 解析模板成render函数
这从页面debug的结果看，如果是用含有compiler版本的vuejs应该是在vm.$mount(vm.$options.el)里面做的模板实时解析，响应式的监听依赖收集是在vm.initData的时候。

感觉是不是应该第一步和第二步的次序做个交换？
第三步页面渲染
第四步当观察的属性发生变化，会触发包含这个属性的页面组件的重新渲染，我看之前网上说这个渲染的性能和组件的体积正相关，和组件内包含变化属性的节点无关，而且这个会被在vue3.0的时候被修复？
这个不知道是不是理解正确了。

Answer 1

双越 2019-06-27 09:03:08

1. 你说的第一步。应该是先解析模板，再监听数据。因为 vue 对于定义的 data 不是全部都监听，只有出现在模板中的才会被监听。你也可以在开发环境中用 vue-compiler 提前编译模板为 render 函数，这也算是先解析模板。

2. 你说的第四步。重新渲染即 diff 算法，复杂度是 O(n) ，即算法执行时间和虚拟 DOM 树的节点数量有关，和属性无关。3.0 要重写 vdom 和 diff 算法，会有一些优化，但是也逃不出 O(n) 的时间复杂度。
   

• 提问者 Astrogladiator #1

  非常感谢！

• 提问者 Astrogladiator #2

  还有个问题，就是vue在组件的render函数中，为什么不缓存那些只含有那些数据变化的节点，比如说记录这个虚拟节点在当前组件中的位置，以及当前节点中存在这样类型节点的数量，以及父组件的id，然后直接对变化的节点做patch？

• 双越 回复 提问者 Astrogladiator #3

  没太明白你的意思，缓存了有啥意义吗？能减少计算量吗？