Vue原理-虚拟DOM和diff算法

最新推荐文章于 2023-07-31 10:34:58 发布
最新推荐文章于 2023-07-31 10:34:58 发布
阅读量272 收藏 3
点赞数 1
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s2422617864/article/details/119855400
版权
本文探讨了虚拟DOM(VDOM)的概念，重点讲解了如何通过diff算法在JavaScript中高效地比较DOM变化。从源码解读到实际操作，涉及key在比较中的作用，以及如何利用VNode和patch函数进行DOM更新。
摘要由CSDN通过智能技术生成

vdom和diff

在这里插入图片描述

vdom

在这里插入图片描述

js模拟DOM

在这里插入图片描述

diff算法

在这里插入图片描述

diff算法概述

在这里插入图片描述
比较方式：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

diff源码解读

  1. 处理DOM

  2. 返回vnode（包含老dom）
    在这里插入图片描述

  3. patch函数

在这里插入图片描述

path

如果是空的就创建一个新的再关联一下
在这里插入图片描述
如果tag和key都相同则这层不做比较：（都不传key也是相等的undefined）
在这里插入图片描述
不同直接删除重建：
在这里插入图片描述

pathVnode

设置生命周期通Vue：
同时设置新elm为旧的elm（告诉它该和谁比对）
在这里插入图片描述
判断时children还是test：
在这里插入图片描述
text对比：
在这里插入图片描述
有子节点时的对比：
在这里插入图片描述
都有时对比children：
在这里插入图片描述

updateChildren

二者子节点：
在这里插入图片描述
定义方式：
在这里插入图片描述
开始和开始结束和结束对比：对比条件为key和tag是否相同
在这里插入图片描述
开始和结束对标，结束和开始对比：
在这里插入图片描述
**比对后不一样拿当前新节点key和所有其他的key做对比，看是否相同
对应上了判断tag是否一样 否则直接插入新节点
在这里插入图片描述

之后指针进行累加：碰到一块则循环结束
在这里插入图片描述

不使用key和使用key（随机数也不可以）

用key可以直接做一个移动就好不用删掉重新插入
在这里插入图片描述

火腿肠烧烤大赛冠军
关注
专栏目录
vue中的虚拟dom和diff算法
webchang的博客
05-17 2212
简单理解底层的实现原理
vue 虚拟dom和diff算法详解
geejkse_seff的博客
07-31 662
什么是虚拟dom大家一定要记住的一点就是，虚拟dom就是一个普通的js对象。是一个用来描述真实dom结构的js对象，因为他不是真实dom，所以才叫虚拟dom。虚拟dom的结构从下图中，我们来看一看虚拟dom结构到底是怎样的如上图，这就是虚拟dom的结构，他是一个对象，下面有6个属性，sel表示当前节点标签名，data内是节点的属性，elm表示当前虚拟节点对应的真实节点（这里暂时没有），text表示当前节点下的文本，children表示当前节点下的其他标签虚拟dom的作用我们在最后整理一下步骤。...
浅谈vue虚拟dom，diff算法
m0_51328823的博客
02-07 437
vue中的虚拟dom 什么是虚拟dom? 虚拟dom可以简单的用一句话概括，就是用普通的js对象来描述DOM结构，因为不是真实DOM，所以称之为虚拟DOM。 简单来说：本质上是js对象,这个对象就是更加轻量级的对DOM的描述 为什么要创建虚拟dom? 创建真实DOM成本比较高，如果用 js对象来描述一个dom节点，成本比较低，另外我们在频繁操作dom是一种比较大的开销。所以建议用虚拟dom来描述真实dom。 vue中diff算法 diff算法就是进行虚拟节点对比，并返回一个patch对象，用来存储两个
简单介绍虚拟DOM和diff算法
果车的博客
01-30 774
一、diff算法简介： 上面代码的改变有很多种方式，第一种：我们可以将左边box这个div全都删掉然后替换成右边这个div（但这种方式感觉太大费周章），第二种方法：是我们可以保持原有的内容不发生变化只添加新增的内容。 像第二种这样进行精细化对比实现最小量更新我们称为diff算法。 二、虚拟DOM ： 用JavaScript对象描述DOM的层次结构。DOM中的一切属性都在虚拟DOM中有对应的属性。 diff算法是在两个虚拟DOM之间计算的，新虚拟DOM和老虚拟DOM进行diff(精细化比较.
什么是虚拟DOM和diff算法？
weixin_72502274的博客
12-06 301
前端面试必会
深入Vue2.x的虚拟DOM diff原理
热门推荐
小时光茶社
09-22 3万+
作者简介：汪玉林，高级工程师，增值产品部前端Leader，目前团队负责手Q游戏中心、手Q游戏运营、手Q阅读等项目，有丰富的Web前端架构经验。 一、前言Vue的核心是双向绑定和虚拟DOM（下文我们简称为vdom），关于双向绑定可以参阅木琴的文章《剖析Vue原理&实现双向绑定MVVM》，vdom是树状结构，其节点为vnode，vnode和浏览器DOM中的Node一一对应，通过vnode的elm属性可
Vue源码学习 - 虚拟Dom 和 diff算法
最新发布
铁锤妹妹的博客
07-31 1113
因为 Diff 算法，计算的就是虚拟 DOM 的差异，所以先铺垫一点点虚拟 DOM，了解一下其结构，再去看Diff 算法原理，循循渐进会更好些。 渲染真实的 DOM 时，并不是暴力覆盖原有的 DOM ，而是比对新旧两个vnode（虚拟节点），如果不是同一个节点，删除老的，替换成新的；如果是同一个节点，就复用老节点，增加新节点的属性。
一篇文章带你搞懂Vue虚拟Dom与diff算法
10-14
虚拟DOM（Virtual DOM）和diff算法是现代前端框架的核心技术之一，特别是对于Vue这样的响应式框架来说，它们扮演着至关重要的角色。在介绍Vue的虚拟DOM和diff算法之前，我们首先需要了解什么是虚拟DOM以及为什么需要...
vue源码-虚拟DOM与diff算法分析-虚拟DOM（二）
qq_45679015的博客
09-06 450
什么是虚拟DOM? 用javaScript对象描述DOM的层次结构，DOM中的一切属性都在虚拟DOM中有对应的属性。 真实DOM： <div class="box"> <h3>我是一个标题</h3> <ul> <li>西瓜</li> <li>葡萄</li> <li>香蕉</li> </
虚拟 dom
lk19910323的博客
04-26 305
虚拟 dom 是利用 js 描述元素与元素的关系，用 js 对象来表示真实的 DOM 树结构，创建一个虚拟 DOM 对象 由于在浏览器中操作 DOM 是很昂贵的。频繁的操作 DOM，会产⽣⼀定的性能问题. 在组件渲染的时候会调用 render 函数，这个函数会生成一个虚拟 dom，再根据这个虚拟 dom 生成真实的 dom，然后这个真实的 dom 会挂载到我们的页面中。 如果只是渲染一个页面后期不改动的话 那么虚拟 dom 其实成本更高 因为 都要渲染成真实的 dom 如果组件内有响应的数据，数据发生改变的
详解虚拟DOM与Diff算法
油墨香^-^的博客
06-24 961
最近复习到虚拟DOM与Diff，翻阅了众多资料，特此总结了这篇长文，加深自己对vue的理解。 这篇文章比较详细的分析了vue的虚拟DOM,Diff算法，其中一些关键的地方从别处搬运了一些图进行说明(感谢制图的大佬)，也包含比较详细的源码解读。 真实DOM的渲染 在讲虚拟DOM之前，先说一下真实DOM的渲染。 浏览器真实DOM渲染的过程大概分为以下几个部分： 构建DOM树。通过htmlparser解析处理html标记，将它们构建为DOM树(DOM tree)，当解析器遇到非阻塞资源(图片，.
虚拟dom及diff算法解析
ckwang6的博客
12-10 4032
什么是DOM 浏览器HTML渲染过程 DOM树与渲染树 重绘与重排 事件委托 DOM操作性能分析 天生就慢 什么是虚拟DOM 虚拟DOM Diff算法 虚拟DOM性能分析
Vue中如何使用console.log打印
火腿肠的博客
11-09 7413
1.使用window.console.log() 2.更改配置：
前端角度解决跨域的三种方法（CORS、JSONP、接口代理）
火腿肠的博客
11-02 3109
跨域的概念： 同源策略是由 Netscape 提出的一个安全策略，它是浏览器最核心也是最基本的安全功能，如果缺少同源策略，则浏览器的正常功能可能都会受到影响，现在所有支持JavaScript的浏览器 都会使用这个策略。 所谓同源指的是： 协议、域名、端口号都相同，只要有一个不相同，那么都是非同源。 ①、http://www.123.com/index.html 调用 http://www.123.com/welcome.jsp 协议、域名、端口号都相同，同源。 ②、https://www.123.com/i
Vue-三种方式实现tab切换
火腿肠的博客
10-29 3054
一、通过V-show/V-if实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
前端单位的解读和换算px/%/em/rem/vh/vm/vim/vmax
火腿肠的博客
11-06 2627
px 像素 固定单位 % 相对单位 相对于最近的父元素 em em：大小相对于font-size 例：font-size=100 10em =1000 默认 1em=16px，自己有字号大小就相对于自己如果没有就往上找 由于fontsize经常发生改动 所以项目中并不常用 rem（root em） rem：相对于根元素（html）的字号大小 默认 1rem=16px，依旧相对于像素 所以需要找一个根据用户界面可变的单位 vw（viewport width） vw：视口宽度，相对于窗口（视口） 满屏
Vue-cli4.0路由的配置
火腿肠的博客
11-02 2305
1.首先需要先安装路由 可以在ui界面安装也可以npm 2.创建router.js文件并写好 注意点： （1）子路由不需要再写/ （2）如果需要传值 path写成 path: ‘product/:id’,形式 （3）一般都写一个home父模板 其他往里填 // 拉取依赖 import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); // 引入所需文件 import Home from './pages/hom
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值