虚拟DOM

最新推荐文章于 2023-05-24 10:54:12 发布
最新推荐文章于 2023-05-24 10:54:12 发布
阅读量48 收藏 1
点赞数 1
分类专栏： 前端面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41358807/article/details/115507979
版权
本文介绍了Vue中如何利用Snabbdom库创建虚拟DOM，以提高性能。虚拟DOM通过对象形式模拟真实DOM，减少直接操作DOM的开销。文章详细阐述了虚拟DOM的优点，如通过diff算法比较两个DOM树的差异，仅更新变化部分，以及patch函数在首次渲染和更新时的角色。此外，还讨论了patchVnode过程，包括新旧vnode的比较和更新。
摘要由CSDN通过智能技术生成

vue中创建虚拟DOM需要引入Snabdom库

什么是虚拟DOM

在vue中使用的是MVVM数据双向绑定模式，这样由于数据的变更视图实时更新，会导致大量的操作DOM节点，为了优化操作，使用对象的形式模拟真实的DOM节点，以减少对真实DOM的操作。对象中包含三个属性：ｔａｇ、props、children

虚拟DOM的优点

虚拟DOM会比较两个DOM树中的不同，只渲染发生改变的节点

diff算法

在vue中只会比较同一层次的节点，不会跨层比较，这样就减少了深度遍历dom树所花费的时间

创建vnode

vnode函数返回一个对象，当执行h函数之后会生成对应的vnode对象，保存在对应变量里

patch函数

在首次页面渲染的时候执行一次patch函数，将vnode放入一个空的容器中

当有新的vnode需要替换时，就用patch函数替换旧的vnode

  • 当旧的vnode不存在时，先创建一个空的容器
  • 判断新旧的标签名和key是否一致，若一致就执行pathchVnode，若不一致，创建一个新的DOM元素并插入，最后删除旧的vonde
  • patchVnode，把旧的vnode元素赋值给新的Vnode的元素
  • 判断新旧vnode的孩子是否相同，不同就更新。
谢家的晓敏
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
虚拟DOM的实现
05-20
虚拟DOM（Virtual DOM）是现代前端开发中的一个重要概念，它是一种优化Web应用性能的技术，尤其在React、Vue等JavaScript库和框架中广泛应用。虚拟DOM的主要目的是通过减少对真实DOM的操作来提升性能，因为DOM操作是...
理解虚拟dom
最新发布
wyzqhhhh的博客
03-31 963
虚拟 DOM是由一系列的 JavaScript 对象组成的树状结构，每个对象代表着一个DOM元素，包括元素的标签名、属性、子节点等信息。虚拟 DOM中的每个节点都是一个 JavaScript 对象，它们可以轻松地被创建、更新和销毁，而不涉及到实际的DOM操作。将目标所需的 UI 通过数据结构“虚拟”地表示出来，保存在内存中，然后将真实的DOM与之保持同步。
虚拟dom
weixin_52972239的博客
06-14 1851
1、虚拟DOM（virtual DOM）简称vdom，是一个普通的js对象，用来描述真实dom结构，因为它不是真实的DOM，所以称为虚拟DOM 2、属性：vdom具有三个属性 （1）tag：标签名 （2）attrs：属性 （3）children：子元素对象3、虚拟DOM的设计思想 （1）提供一种方便的工具，使开发效率得到保证； （2）保证最小化的DOM操作，使得执行效率得到保证1、原因一：真实的DOM运行是很慢的，其元素非常庞大，页面的性能问题，大部分都是由DOM操作引起的，真实的DOM节点，哪怕一个最简单
Vue虚拟DOM
weixin_42560424的博客
05-24 697
的技术来提高页面渲染效率。操作的次数，提高页面的渲染效率。操作，最后将这些操作应用到实际。节点，而是先将操作应用到虚拟。，而是等待下一个事件循环。，这样可以避免多次更新。并不会直接操作实际的。”的机制，也就是说，
虚拟 DOM
ZhangLiangXWZ的博客
12-08 444
虚拟节点 ref：mounted中才能获取到 Vue生命周期 每个 Vue 实例在被创建时都要经过一系列的初始化过程，例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 生命周期图示 生命周期钩子 所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算 beforeCreate 在实例初始化之后，数据观测 (data observ
虚拟 DOM 详解
TongJ_的博客
02-20 3128
虚拟 dom 本质上就是一个普通的 JS 对象，用于描述视图的界面结构 在vue中，每个组件都有一个render函数，每个render函数都会返回一个虚拟 dom 树，这也就意味着每个组件都对应一棵虚拟 DOM 树
为什么需要虚拟DOM？
夕山雨的博客
08-30 4465
目录1. 真实DOM操作的性能问题2. 虚拟DOM的作用总结 我们知道，虚拟DOM的概念是由Facebook的React团队最早提出来的，也是React框架的核心概念之一。它的作用是以js的形式在内存中描述真实的DOM结构，这样当页面内容需要发生变动时，React可以通过对前后虚拟DOM的比对，计算出如何以最小的代价操作真实DOM。 1. 真实DOM操作的性能问题 在虚拟DOM出现之前，前端开发者最常用的方式是用jQuery直接操作真实DOM，像下面这样： <body> <div id
如何理解虚拟DOM
种麦南山下的博客
10-11 5218
虚拟 DOM （Virtual DOM ）是由普通的JS对象来描述DOM对象，因为不是真实的DOM对象，所以叫Virtual DOM。
虚拟DOM详解
weixin_48644617的博客
08-24 473
对虚拟DOM的理解？ 虚拟DOM的解析过程？为什么要用虚拟DOM？虚拟DOM真的比真实DOM性能好吗？DIFF算法的原理
React 虚拟DOM
qq_43539854的博客
04-17 4739
虚拟DOM 什么是DOM DOM是用一颗逻辑树来表示一个文档，树的每个分支的终点都是一个节点，可以用特定的方式（编写JS、CSS、HTML）来改变这个树的结构，从而改变文档结构、样式或内容。 什么是虚拟DOM 虚拟DOM就是一个JS对象，通过对象的方式来表示DOM结构，通过事务处理机制，将多次DOM修改的结果一次性更新到页面上，从而有效的减少页面渲染次数，减少修改DOM重绘重排的时间，提高渲染性能。 React在内存中维护一个跟真实DOM一样的虚拟DOM树，再改动完组件后，会再生成一个新的虚拟DOM，Rea
浅谈React的最大亮点之虚拟DOM
08-27
主要介绍了浅谈React的最大亮点之虚拟DOM,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 虚拟DOM的原理
01-21
为什么需要虚拟DOM？ 　如果对前端工作进行抽象的话，主要就是维护状态和更新视图，而更新视图和维护状态都需要DOM操作。其实近年来，前端的框架主要发展方向就是解放DOM操作的复杂性。 　运行js的速度是很快的，...
虚拟dom1
08-08
虚拟DOM是一种在JavaScript中模拟真实DOM树的概念，它在现代前端框架如Vue.js中起着核心作用。虚拟DOM的主要目标是提高Web应用的性能和效率，通过减少对真实DOM的操作来优化用户体验。以下是对虚拟DOM及其相关知识点...
display:flex和三列布局
weixin_41358807的博客
01-27 1517
flex 弹性盒子 在父元素上设置display：flex 弹性改变父元素中的子元素 默认情况下：有一条水平的主轴，所有子元素按照主轴方向排列，在主轴方向没有宽度，在侧轴方向宽度填满。主轴方向元素变多时，自动挤压 父元素属性 flex-direction表示主轴方向： 1.row表示主轴水平方向排列，从左到右，侧轴垂直从上到下 row-reverse表示主轴水平，从右到左排列 2.column表示主轴垂直方向排列，从上到下 column-reverse表示主轴垂直方向排列，从下到上 justify-cont
Proxy代理
weixin_41358807的博客
03-26 1120
是一个对目标对象操作的拦截器，拦截对目标对象的操作并自定义一些行为 let p=new Proxy(target,handler) //target指目标对象，handler指（包含操作时定义代理的行为的属性）一个对象 vue使用proxy替换Object.defineProperty方法给属性添加set,get的办法，直接监控data对象 ...
async_await用法
weixin_41358807的博客
01-31 365
async作为修饰关键字修饰在函数前，表示该函数是一个异步函数 await的使用必须有async关键字 await等待的必须是一个promise对象 async返回的是一个promise对象 asyn function A(){ return '星星';} A().then(result=>{console.log(result);}) 没有await的执行 function A(){ return new Promise((resolve,reject)=>{ .
js中for和forEach的区别（数组扁平化）
weixin_41358807的博客
03-22 304
上代码 function deepFlatten(arr){ // const res=[] // arr.forEach(element => { // if(Array.isArray(element)){ // res=res.concat(deepFlatten(element)) // }else{ // res.push(element) // } // });
“==”和“===”的区别
weixin_41358807的博客
01-22 282
=== 类型不同，值相同返回false 类型相同，值不同返回true == 类型不同，值相同，自动转换类型再比较，返回true
vue 虚拟 DOM理解
08-20
Vue 的虚拟 DOM 是一种在内存中以 JavaScript 对象的形式表示页面结构的技术。它是 Vue 在渲染页面时的一个关键概念。 传统的 DOM 操作是直接操作页面上的实际 DOM 元素，而虚拟 DOM 则是通过 JavaScript 对象来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值