vue 插入dom_vue内部复用问题以及虚拟dom的更新

由于在浏览器中操作DOM的代价是非常“昂贵”的，所以才在Vue引入了Virtual DOM，Virtual DOM是对真实DOM的一种抽象描述。使用virtual DOM渲染页面时，也不会将整个虚拟dom全部渲染。会使用diff算法，计算Virtual DOM树改变部分。

Vue的Diff算法循环比较Virtual DOM同级节点，若找不到与新节点类型相同的节点，则插入一个新节点，若有相同类型的节点则进行节点属性的更新，最后删除新节点列表中不包含的旧节点。

在Diff中会使用到一种就地复用的策略。就地复用是指Vue会尽可能复用之前的DOM，尽可能不发生DOM的移动。同类节点为类型相同且节点数据一致，如前后两个span，span标签上的属性没有改变，但是里面的内容变了，这样就算作同类节点

  <div id="app"><span v-if="isUser"><label for="username">用户账号</label><input id="username" type="text" placeholder="账号"></span><span v-else><label for="password">用户密码</label><input id="password" type="text" placeholder="密码"></span><button @click="isUser=!isUser">按钮</button></div>

上面代码中label标签和input框都是属于同类节点，点击按钮切换时会复用。input中的已经输入的内容也不会清空。

如上图，输入框中的内容不会清空。

key

vue中有key的话，就会根据key值去判断某个是否修改，重新渲染这一项，对数据改变之后的diff更新比较有很大的性能提升。为了更加高效的更新虚拟dom，另外在vue中使用相同标签元素的过度切换的时候，也需要使用key属性，其目的是为了让vue区分它们，否则vue就只会替换其内部属性而不会触发过度效果。

vue 插入dom_vue内部复用问题以及虚拟dom的更新相关推荐

【Vue.js源码解析二】-- 虚拟 DOM
前言笔记来源:拉勾教育大前端高薪训练营阅读建议:建议通过左侧导航栏进行阅读虚拟 DOM 基本介绍什么是虚拟 DOM 虚拟 DOM(Virtual DOM) 是使用 JavaScript 对象 ...
Vue 原理解析（五）之虚拟Dom 到真实Dom的转换过程
上一篇 vue 原理解析(四): 虚拟Dom 是怎么生成的再有一颗树形结构的Javascript对象后, 我们需要做的就是讲这棵树跟真实Dom树形成映射关系.我们先回顾之前的mountComponn ...
Vue进阶之Virtual DOM(虚拟DOM) 实现原理
Vue进阶之Virtual DOM(虚拟DOM) 实现原理 Virtual DOM(虚拟 DOM),是由普通的 JS 对象来描述 DOM 对象,因为不是真实的 DOM 对象,所以叫 Virtual D ...
vue基础--模板语法、常用指令：v-if、v-show、v-for、虚拟DOM、v-once、v-cloak、v-text、v-html、v-bind、v-on、自定义指令
一.模板语法 Vue.js 使用了基于 HTML 的模板语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据.所有 Vue.js 的模板都是合法的 HTML,所以能被遵循规范的浏览器和 ...
VUE | key的内部原理、Vue监测数据的原理、Vue.set()和vm.$set()的使用
目录目录一.react.vue中的key有什么作用?(key的内部原理) 1.虚拟DOM中key的作用: 2.对比规则: 3.用index作为key可能会引发的问题: 4.开发中如何选择key? ...
26.Vue列表渲染中key的作用与原理（内含虚拟DOM的对比算法详解）
目录 1.暴露问题,使用index作为key 2.使用唯一标识p.id作为key 3.不写key的配置 4.key的工作原理及虚拟DOM的对比算法 5.总结 25.Vue列表渲染_爱米酱的博客-CSD ...
学习Vue3 第五章（Vue核心虚拟Dom和 diff 算法）
为什么要学习源码 1.可以提升自己学习更优秀的API设计和代码逻辑 2.面试的时候也会经常问源码相关的东西 3.更快的掌握vue和遇到问题可以定位介绍虚拟DOM 虚拟DOM就是通过JS来生成一个AS ...
Vue 这更新是要抛弃虚拟 DOM ？
最近 Vue 在美国举办了 Vue Conf 2022,不过可惜的是在国内并未掀起任何的波澜,于是我来试试能不能一石激起千层浪,因为尤雨溪在 Vue Conf 上说他们正在探索一种新的编译策略. 流行 ...
深度剖析 Vue3 如何通过虚拟DOM更新页面
上一讲我们主要介绍了 Vue 项目的首次渲染流程,在 mountComponent 中注册了effect 函数,这样,在组件数据有更新的时候,就会通知到组件的 update 方法进行更新 Vue 中组 ...

vue 插入dom_vue内部复用问题以及虚拟dom的更新

vue 插入dom_vue内部复用问题以及虚拟dom的更新相关推荐

最新文章

热门文章