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

首页课程实战体系课手记专栏慕课教程

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

来源：4-19 vue组件是如何渲染和更新的

白夜2021

2022-01-05

将data里的属性挂载到vue实例上
利用getter和setter监听data上的属性
将模板编译为render函数，结合data里数据执行render生成vnode
执行render函数时，会触发data属性的getter，在getter函数里将这些依赖都收集起来。（watcher）
通过patch生成dom节点。
修改data时，notify watcher，看修改的data是不是在watcher里。（这是在data里data.age=20新增属性时，无法实现响应式的原因）
如果之前被收集起来的依赖有被notify，就重新执行render函数。

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

写回答

1回答

双越

2022-01-06

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

0

4

慕盖茨5191093

回复

双越

老师，patch虚拟dom时是基于组件的，那么通过vnode更新实际dom的时候，是以当前组件为单位重新渲染，还是只更新当前改变的属性所在的tag呢，比如组件内有这样的片段{{name}}，当前组件只更新了name值，实际会重新渲染整个组件么，还是只更新name所在的span标签。

2022-04-23

共4条回复

2024版前端框架及项目面试聚焦Vue3/React/Webpack

面向1-3年前端的框架及项目面试“刚需内容”

4663 学习 · 1644 问题

相似问题

老师有个问题一直不太明白，在更新渲染时触发render函数的时机在哪里，具体看截图。

回答 1

vue为什么不需要SCU

回答 1

老师关于nextTick是微任务

回答 1

这张流程图里的watch本质上是个什么东西？

回答 2

vue和react不是都基于diff算法吗。那为什么这里dom没有变化还会重新渲染

回答 1

打开慕课网App查看更多内容