30｜虚拟DOM（上）：如何通过虚拟DOM更新页面？

大圣



该思维导图由 AI 生成，仅供参考

你好，我是大圣。
上一讲我们主要介绍了 Vue 项目的首次渲染流程，在 mountComponent 中注册了 effect 函数，这样，在组件数据有更新的时候，就会通知到组件的 update 方法进行更新。
Vue 中组件更新的方式也是使用了响应式 + 虚拟 DOM 的方式，这个我们在第一讲中有介绍过 Vue 1、Vue 2 和 Vue 3 中更新方式的变化，今天我们就来详细剖析一下 Vue 组件内部如何通过虚拟 DOM 更新页面的代码细节。
Vue 虚拟 DOM 执行流程我们从虚拟 DOM 在 Vue 的执行流程开始讲起。在 Vue 中，我们使用虚拟 DOM 来描述页面的组件，比如下面的 template 虽然格式和 HTML 很像，但是在 Vue 的内部会解析成 JavaScript 函数，这个函数就是用来返回虚拟 DOM：
<div id="app">
  <p>hello world</p>
  <Rate :value="4"></Rate>
</div>
上面的 template 会解析成下面的函数，最终返回一个 JavaScript 的对象能够描述这段 HTML：
function render(){
  return h('div',{id:"app"},children:[
    h('p',{},'hello world'),
    h(Rate,{value:4}),
  ])
}

公开

同步至部落

取消

完成

0/2000

荧光笔

直线

曲线

笔记

复制

AI

深入了解
翻译
英语
中文简体
中文繁体
法语
德语
日语
韩语
俄语
西班牙语
阿拉伯语
解释
总结

Vue虚拟DOM更新页面的执行流程是本文的主要内容。文章首先介绍了虚拟DOM在Vue中的创建和DOM的创建过程，然后详细剖析了Vue组件内部如何通过虚拟DOM更新页面的代码细节。其中，patch函数中对节点自身属性的更新和子元素的更新是重点，而patchKeyedChildren函数则实现了按需更新，最大化减少DOM操作。文章还提到了Vue 3中性能优化的思想，通过patchFlag实现按需更新的方式。总的来说，本文深入解析了Vue中虚拟DOM更新页面的细节，对于想深入了解Vue内部实现原理的读者具有很高的参考价值。文章还介绍了patchChildren函数的实现，以及双端对比的优化算法，这些内容展示了Vue在虚拟DOM更新方面的高效性能。最后，文章提出了一个思考题，为什么在写v-for循环时建议使用key属性，引发读者思考。总的来说，本文内容详实，涵盖了Vue虚拟DOM更新的方方面面，对于想深入了解Vue内部实现原理的读者具有很高的参考价值。

仅可试看部分内容，如需阅读全部内容，请付费购买文章所属专栏
《玩转 Vue 3 全家桶》，新⼈⾸单¥68

立即购买

登录后留言

全部留言(5)

最新
精选

费城的二鹏
key属性有利于判断新旧列表的复用判断，提升列表乱序后的复用率。
2021-12-29

5
chensd
什么场景会触发 invalidateJob, 具体的demo可否展示一下
2022-04-07

1
Meiki
vue在进行页面更新时，会通过Diff算法对虚拟DOM进行更新，因为真实的DOM消耗比较大。假设我们需要对数组进行增删改查，我们需要快速定位到某一项，所以我们需要给每项绑一个具体的唯一的id值
2021-12-31

1
李凯
这一节值得花时间认真阅读，写的很清楚，收获满满！
2023-09-09归属地：江苏


evan
"然后进行队尾元素的预判，可以判断出 g 和元素也是一样的：" 此处文案描述有错误，应该是“然后进行队尾元素的预判，可以判断出 g 和 h 元素也是一样的：”
2022-03-28
1


收起评论