vue中的虚拟dom

最新推荐文章于 2023-12-09 13:52:07 发布
最新推荐文章于 2023-12-09 13:52:07 发布
阅读量288 收藏
点赞数
文章标签： vue javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/queryselectorall/article/details/105061451
版权

频繁且复杂的dom操作通常是前端性能瓶颈的产生点，Vue提供了虚拟dom的解决办法

(1) 提供一种方便的工具，使得开发效率得到保证
(2) 保证最小化的DOM操作，使得执行效率得到保证

  1. 根据虚拟dom树最初渲染成真实dom
  2. 当数据变化，或者说是页面需要重新渲染的时候，会重新生成一个新的完整的虚拟dom
  3. 拿新的虚拟dom来和旧的虚拟dom做对比（使用diff算法）。得到需要更新的地方之后，更新内容
  4. 如果一个节点发生了改变 那么他下面的所有子元素和子节点就不用去做对比 直接全部更新这个节点，
  5. 如果更新的内容插在了原来的内容里 比如说下面的图 原来的dom树中有abcde
    后来插入了f进来 一开始ab两个节点不用动直接采用虚拟dom中的，不用更新，而c开始 他的位置被f所占 所以会经历 卸载c 装载f 卸载d 装载c 卸载e 装载d 装在e这样的更新 ，这样的方法过于粗暴
    在这里插入图片描述
    如果为元素增加key后，Vue就能根据key，直接找到具体的位置进行操作，效率比较高
    你里插入图片描述
    像这样给每一个元素加上唯一的key值 这样vue 就会根据这唯一的索引直接找到具体的位置进行操作 不会进行连续装载卸载的操作 既能提高性能，也能提高效率
MakabakaGoodnight
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VUE中v-on:click事件中获取当前dom元素的代码
10-18
主要介绍了VUE中v-on:click事件中获取当前dom元素的代码，文中同时给大家提到了v-on：click获取当前事件对象元素的方法,需要的朋友可以参考下
vue 数据变化更新视图原理之 vdom（虚拟dom）、vnode（虚拟节点）、 diff算法、为什么不能用index作为key?
m0_64572085的博客
02-26 206
vdom（虚拟dom）、vnode（虚拟节点）、 diff算法
vue虚拟DOM模拟实现
m0_54089303的博客
12-09 783
虚拟DOM
vue3中直接操作dom
qq_18470967的博客
08-31 1万+
注意：本文所使用的vue3版本为3.2.6 在vue2的时候我们操作dom是这样子使用的 <template> <div class="box"> <div ref="drag" class="box_drag">我会被拖动</div> </div> </template> <script> export default { mounted() { console.log(this.$refs.drag
选择标签方法querySelector和querySelectorAll
DeviL_MCry的博客
06-24 1768
个人觉得querySelector 和 querySelectorAll 是DOM中超强的选择标签的方式，因为他们接受的参数是类CSS选择符的字符串。因此，感觉它们的功能远超传统的getElementById或者getElementsByTagName之类的， 它们的主要区别在于，querySelector 只找一个标签，querySelectorAll 是找多个标签。 举例说明：有如下HTML...
解决vue中虚拟dom,无法实时更新的问题
10-18
今天小编就为大家分享一篇解决vue中虚拟dom,无法实时更新的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 虚拟DOM的原理
10-14
主要介绍了vue 虚拟DOM的原理，帮助大家更好的理解和学习vue，感兴趣的朋友可以了解下
Vue使用虚拟dom进行渲染view的方法
10-15
主要介绍了Vue使用虚拟dom进行渲染view的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
Vue虚拟列表插件vue-virtual-scroller之中文文档
huangpb的博客
05-21 1万+
是一个高度可定制的虚拟滚动列表插件，它可以在大量数据下提供高性能的渲染和滚动。它可以处理各种类型的数据，例如列表、表格、瀑布流等，并且支持水平和垂直滚动，也支持动态列表项。vue-virtual-scroller的API和事件系统也非常丰富，可以让开发者轻松地自定义滚动逻辑和交互效果。
Vue3(小白学习路)
最新发布
梦起晨
12-09 828
Vue学习中遇到的一些问题
vue实现点击某个dom元素之外的方法
qq_29236119的博客
03-22 2912
在项目开发中搜索按钮点击出现搜索框内容，这个时候点击搜索框以外的内容，搜索框隐藏掉，如下所示： 1、源码 2、实现点击其他区域搜索框内容隐藏，如下： document.addEventListener('click', (e) => { if (this.$refs.showPanel) { let isSelf = this.$refs.showPanel.contains(e.target) if (!isSelf) { this.searchbox =
vue模拟点击事件
qq719756146的博客
12-05 2万+
通过vue的ref this.$refs.refName.click()
Vue怎样遍历NodeList对象,this.$refs.XX.$el
陌桑楚客
09-29 890
this.$refs.XX.$el.querySelectorAll('.类名') //一定要是querySelectorAll方法 案例如下：会议内容提示文字显示隐藏问题 watch: { 'ruleForm.chrchrhynr': function(val) { let hynrx = this.$refs.hynrx.$el.querySelectorAll('.el-form-item__error') hynrx.forEach((item,...
助你上手Vue3全家桶之Vue3教程
qq_46416934的博客
07-31 3092
这些内容是博主在学习过程中记录下来的，有一些不重要的点就跳过了，需要时自行查询文档。其实V2到V3的学习成本不高，熟悉V2的话，看完这篇文章就可以上手V3。Vue3官网在线源码编译地址定义一个组件可以向其父组件触发的事件//在子组件中nameprops{msg{typeString,default''}},emits}return{father}}}//在父组件中。...
vue中的生命周期钩子函数
MakabakaGoodnight的博客
03-24 910
生命周期 组件从创建到销毁的一系列过程叫做生命周期 而vue在生命周期里面提供了一些函数（钩子函数），可以在内部实现一些业务逻辑 组件的生命周期钩子函数大概可以分为三个阶段 1.初始化阶段 beforeCreate created beforeMount mounted 2.正在运行阶段 beforeUpdate updated 3.销毁的阶段 beforeDestroy dest...
querySelectorAll里面的坑
走在秃头的路上的博客
01-15 3642
在使用querySelectorAll操作dom元素 的时候，我发现一个问题，先看下面这段代码： &lt;div class="item"&gt;&lt;/div&gt; &lt;div class="item"&gt;&lt;/div&gt; &lt;div class="item"&gt;&lt;/div&gt; &lt;script&amp
vue样式穿透
MakabakaGoodnight的博客
01-19 252
::v-deep 适用于vue-cli3 以上的css预处理器中，能加快编译速度
获取DOM对象的五种方式
微风的博客
08-15 2589
#获取DOM对象的五种方式 ##一，通过ID获取DOM对象 ``` varxx=document.getElementById（'xx'） ``` ##二.通过签名获取DOM对象 ``` varxx=document.getElementsByTagId（'xx'） ``` ##三.通过类名获取DOM对象（获取的） ``` varxx=document.getElementsByClassName('xx') ``` ##...
querySelector() 方法
热门推荐
weixin_34396902的博客
03-31 3万+
返回文档中匹配指定 CSS 选择器的一个元素。 虽然IE8中没有getElementsByClassName()但可以用querySelector()代替 注意：querySelector() 方法仅仅返回匹配指定选择器的第一个元素。如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。 querySelector 获取文档中 class="example" ...
vue中虚拟DOM的优点
05-15
Vue中使用虚拟DOM的优点主要有以下几点： 1. 提高渲染效率：Vue中的虚拟DOM可以将页面的状态和DOM分离开来，当页面状态发生变化时，只需要对比新旧状态的差异，然后只更新差异部分的DOM，而不是重新渲染整个页面，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值