老师，针对这个vue渲染的流程图我总结了一下不知道对不对

Question

1. 将data里的属性挂载到vue实例上

2. 利用getter和setter监听data上的属性

3. 将模板编译为render函数，结合data里数据执行render生成vnode

4. 执行render函数时，会触发data属性的getter，在getter函数里将这些依赖都收集起来。（watcher）

5. 通过patch生成dom节点。

6. 修改data时，notify watcher，看修改的data是不是在watcher里。（这是在data里data.age=20新增属性时，无法实现响应式的原因）

7. 如果之前被收集起来的依赖有被notify，就重新执行render函数。

一开始第一步和第二步的顺序我就有点拿不准，哪个才是第一步。
然后最后一步的依赖是一个个的data属性，那怎么能针对某一个data属性进行render呢，问的有点多，麻烦老师了。

Answer 1

双越 2022-01-06 08:32:50

1. 第一步和第二步的顺序没问题。

2. “那怎么能针对某一个data属性进行render呢”这句话我没看懂。既然已经对 data 进行了监听并收集了依赖，那 data 属性一修改，自然就会触发 re-render ，图上画的很清楚。
   

• 提问者 白夜2021 #1

  谢谢老师解答，第二点我没说清楚。举个例子，就是我在初始化的data中，定义了十个变量，然后我只修改了其中一个变量，那当触发re-render时，是这一个变量对应的vnode会进行patch更新，还是拿整个vue实例的vnode去进行patch比对？

• 双越 回复 提问者 白夜2021 #2

  是整个组件，以及相关的子组件。

• 提问者 白夜2021 回复 双越 #3

  懂了。谢谢老师

点开查看后面1条评论