Vue 虚拟DOM和diff算法

最新推荐文章于 2023-03-02 15:39:52 发布
最新推荐文章于 2023-03-02 15:39:52 发布
阅读量87 收藏
点赞数
分类专栏： 前端 html 面试 文章标签： vue.js 算法 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/web19808536489/article/details/123053909
版权

vue 中

数据改变 -> 虚拟DOM（计算变更）-> 操作DOM -> 视图更新

虚拟DOM： js执行速度比较快

什么是虚拟DOM？

用JS模拟DOM结构

为什么需要虚拟DOM？

vue中 数据驱动视图，需要用高效方法来控制DOM操作的次数

diff算法： 虚拟DOM的核心

patch函数

两个使用场景：

首次渲染时，判断第一个参数是否是一个真实dom元素，是的话就创建空vnode，并且关联一个DOM元素，然后比较patch函数传入的第一个参数和第二个参数是否是同一个vnode,如果是同一个vnode，那么就直接patchVnode做更新，如果是不同

最低0.47元/天 解锁文章
web19808536489
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【Vue】源码—虚拟DOM和diff算法
军火库
12-22 518
从本质上来说，虚拟DOM是一个JavaScript对象，通过对象的方式来表示DOM结构。将页面状态抽象为JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。虚拟DOM是DOM的抽象，这个对象是更加轻量级的对DOM的描述。新虚拟DOM和旧虚拟DOM进行diff(精细化比较),算出应该如何最小量更新，最后反映到真正的DOM上【虚拟节点变成DOM节点】在Vue里面叫做patch。
Vue 中 diff 算法原理
最新发布
weixin_47818125的博客
05-26 343
diff 的核心就是比较两个虚拟节点的差异。Vue 的 diff 算法是平级比较，不考虑跨级比较的情况。1.2相同节点比较属性,并复用老节点（将老的虚拟 dom 复用给新的虚拟节点 DOM）老的儿子是一个列表，新的儿子也是一个列表 updateChildren。如果头部节点不一致，我们就从后向前对比，相同节点则复用。老的儿子是文本，新的儿子是文本，直接更新文本节点即可。1.3比较儿子节点，考虑老节点和新节点儿子的情况。老的有儿子，新的没儿子。默认优化了子节点追加和子节点删除的情况。
【Vue学习】Vue原理—虚拟DOM和diff算法
zx1041561837的博客
03-02 1156
本文介绍了Vue原理中的虚拟DOM和diff算法。通过snabbdom虚拟DOM库，对diff算法的执行流程和源码进行了简单介绍。
虚拟dom 和 diff算法
小海的博客
10-26 288
虚拟dom .vue文件中的template里写的标签, 都是模板, 都要被vue处理后成虚拟DOM对象, 才会渲染显示到真实DOM页面上 1.内存中生成一样的虚拟DOM结构(本质是个JS对象=) 因为真实的DOM属性好几百个, 没办法快速的知道哪个属性改变了 比如template里标签结构 <div id="box"> <p class="my_p">123</p> </div> 对应的虚拟DOM结构 const dom = {
Vue--diff的原理
IT利刃出鞘的博客
01-21 4335
本文介绍vue的diff的原理。 vue的diff原理是基于虚拟DOM的。
Vue 虚拟DOM和Diff算法
Kameleon
04-12 4854
Vue 虚拟DOM Diff算法思考什么是虚拟DOM为什么使用虚拟DOM真实DOM和虚拟DOM的区别DOM Diff当数据发生变化时，Vue是怎么更新节点的?1. patch2. patchVnode3. updateChildren总结 思考 使用了Vue，使用了React，大家或多或少都有听过虚拟DOM，那么他和我们经常打交道的真实DOM有什么区别呢，另外，他到底是个啥玩意儿呢？ 什么是虚拟D...
一篇文章带你搞懂Vue虚拟Dom与diff算法
10-14
主要给大家介绍了关于Vue虚拟Dom与diff算法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue-dom-diff:vue 虚拟dom diff算法实现
05-05
总结来说，Vue.js的虚拟DOM Diff算法是其高效渲染和更新UI的核心机制。通过理解这个算法的工作原理，开发者可以更好地优化Vue应用，减少不必要的DOM操作，提高用户体验。通过阅读和分析`vue-dom-diff-master`项目中...
详解vue的diff算法原理
08-27
Vue的diff算法原理详解 在本文中，我们将详细介绍 Vue 的 diff 算法原理，diff 算法是 Vue 框架中的一种关键技术，用于高效地更新虚拟 DOM 和真实 DOM。本文将从以下几个方面来介绍 diff 算法的原理： 1. 何时更新...
详解vue3.0 diff算法的使用(超详细)
01-19
尤玉溪在直播中也说了vue3.0的新特性typescript强烈支持，proxy响应式原理，重新虚拟dom，优化diff算法性能提升等等。小编在这里仔细研究了vue3.0beta版本diff算法的源码，并希望把其中的细节和奥妙和大家一起分享。...
彻底搞懂Vue虚拟Dom和diff算法
Web_boom的博客
01-31 310
使用过Vue和React的小伙伴肯定对虚拟Dom和diff算法很熟悉，它扮演着很重要的角色。由于小编接触Vue比较多，React只是浅学，所以本篇主要针对Vue来展开介绍，带你一步一步搞懂它。虚拟DOM（Virtual Dom），也就是我们常说的虚拟节点，是用JS对象来模拟真实DOM中的节点，该对象包含了真实DOM的结构及其属性，用于对比虚拟DOM和真实DOM的差异，从而进行局部渲染来达到优化性能的目的。dom的diff算法时间复杂度为o(n^3),如果使用在框架中性能会很差。
Vue的虚拟DOM及diff算法
weixin_51670675的博客
04-15 2174
通过篇文字，你能了解到：为什么引入虚拟DOM？为什么操作DOM慢？Vue的怎么对比节点？怎么复用节点？v-for中key 的作用是什么？没有key为什么反而快了？Vue3在diff算法方面做了哪些优化？
vue核心面试题：diff算法
王三六博客
08-13 1万+
一、diff算法的时间复杂度 两个树的完全的 diff 算法是一个时间复杂度为 O(n3) , Vue 进行了优化·O(n3) 复杂度的问题转换成 O(n) 复杂度的问题(只比较同级不考虑跨级问题)，因为在前端操作dom的时候了，不会把当前元素作为上一级元素或下一级元素，很少会跨越层级地移动Dom元素，常见的都是同级的比较。 所 以 Virtual Dom只会对同一个层级的元素进行对比。 二、vue中diff算法的原理 1.原理简述： （1）先去同级比较，然后再去比较子节点 （2）先去判断一方..
vue中dom-diff算法
weixin_42458965的博客
06-27 1278
虚拟dom的概念 可以把Virtual DOM 理解为一个简单的JS对象，并且最少包含标签名( tag)、属性(attrs)和子元素对象( children)三个属性。不同的框架对这三个属性的命名会有点差别。总而言之，虚拟dom就是用js对象来描述dom节点 单纯的使用虚拟dom并不能优化性能，因为diff算法需要进行大量的比较。虽然减少了dom操作和渲染，但是大大增加了比较时运算的cup的计算负担。所以，虚拟dom配合着优化之后的diff算法，才能最大程度上的优化渲染。 1.4 diff算法 diff算法
Vue原理解析之diff算法
weixin_42287176的博客
01-13 554
Vue原理解析之diff算法 一、简述 ​ 以装修房子为例，如果我们仅需要在客厅新添一座沙发或者将卧室的床换个位置。那么将整个房子重新翻修显然是不切实际的，我们通常的做法是在原先装修的基础上做微小的改动即可。 ​ 对于 DOM 树来讲，也是同样的道理，如果仅仅是新增了一个标签或者修改了某一个标签的属性或内容。那么引起整个 DOM 树的重新渲染显然是对性能和资源的极大浪费，虽然我们的计算机每秒能进行上亿次的计算。实际上，我们只需要找出新旧 DOM 树存在差异的地方，只针对这一块区域进行重新渲染就可以了。
虚拟 dom
lk19910323的博客
04-26 287
虚拟 dom 是利用 js 描述元素与元素的关系，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象 由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 在组件渲染的时候会调用 render 函数，这个函数会生成一个虚拟 dom，再根据这个虚拟 dom 生成真实的 dom，然后这个真实的 dom 会挂载到我们的页面中。 如果只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高 因为 都要渲染成真实的 dom 如果组件内有响应的数据，数据发生改变的
深入Vue2.x的虚拟DOM diff原理
热门推荐
小时光茶社
09-22 3万+
作者简介：汪玉林，高级工程师，增值产品部前端Leader，目前团队负责手Q游戏中心、手Q游戏运营、手Q阅读等项目，有丰富的Web前端架构经验。 一、前言Vue的核心是双向绑定和虚拟DOM（下文我们简称为vdom），关于双向绑定可以参阅木琴的文章《剖析Vue原理&实现双向绑定MVVM》，vdom是树状结构，其节点为vnode，vnode和浏览器DOM中的Node一一对应，通过vnode的elm属性可
前端100问：
weixin_43992935的博客
07-10 338
第 1 题：（滴滴、饿了么）写 React / Vue 项目时为什么要在列表组件中写 key，其作用是什么？ 理解几个概念： （1）当数据发生变化时，vue是怎么更新节点的？ 改了某个数据，如果直接渲染到真实dom上会引起整个dom树的重绘和重排。 diff算法能够帮助我们，先根据真实DOM生成一颗virtual DOM，当virtual DOM某个节点的数据改变后会生成一个新的Vnode，然后V...
说说Vue中的虚拟Dom和diff算法
congboer的博客
06-24 671
说说Vue中的虚拟Dom和diff算法 一、什么是虚拟Dom？ 虚拟Dom即vdom，它是一个Object对象模型，用来模拟真实的Dom节点的结构。 //这里写个需求，看vdom如何模拟真实dom：如果这里我想写这样一个结构： <div class = "box"> <ul> <li> 人间天堂 </li&gt...
vue虚拟dom和diff算法
05-31
Vue使用虚拟DOM来提高性能和效率。虚拟DOM是一个JavaScript对象，它对真实的DOM进行了抽象，用于描述DOM的结构和属性，并保存在...总的来说，Vue的虚拟DOM和Diff算法可以提高性能和效率，使得Web应用更加流畅和快速。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值