VUE框架在虚拟dom和diff算法下key的作用及原理剖析------VUE框架

已于 2023-11-30 21:44:19 修改
阅读量1.2k 收藏 17
点赞数 29
分类专栏： # VUE框架 前端 文章标签： vue.js 前端 javascript vue js 前端框架 ecmascript
于 2023-11-30 10:41:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/134706615
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        th,td{border: 1px solid black;}
    </style>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <table>
            <tr>
                <th>序号</th>
                <th>英雄</th>
                <th>能量值</th>
                <th>选择</th>
            </tr>
            <!-- VUE框架是采用了虚拟dom和diff算法来提高执行效率的 -->
            <!-- 虚拟dom是在内存中的dom对象 -->
            <!-- diff算法,可以快速比较两个对象的不同之处 -->
            <!-- 当我们没有设置key的时候,默认的key就是我们的index作为key的 -->
            <!-- v-for所在的标签中有一个很重要的属性key,这个key是这个dom元素的身份证号或者说唯一标识 -->
            <!-- 当我们没有设置key的时候默认为index作为key的标识 -->
            <!-- 内存中的虚拟dom生成的每一个tr上都会标识有一个唯一的key做区分 -->
            <!-- 类似于我们实体dom树上的id -->
            <!-- 当我们的diff算法比对时,发现没有变化,不会重新渲染,而是直接复用 -->
            <!-- 甚至连子元素都可以复用比较,不需要创建 -->
            <!-- 新的虚拟dom实际是在内存中的,他和老的已经渲染出来的实际dom进行比对 -->
            <!-- 比对不一样才修改,一样部分直接原地使用即可 -->
            <tr v-for="(hero,index) in heros" :key="hero.id">
                <td>{{index}}</td>
                <td>{{hero.name}}</td>
                <td>{{hero.power}}</td>
                <td><input type="checkbox"/></td>
            </tr>
        </table>
        <button @click="addHero()">按一下</button>
        <!-- 采用index作为key存在什么问题? -->
        <!-- 第一个问题,效率低 -->
        <!-- 尽管真实dom上我们已经按下或选中了这个复选框了 -->
        <!-- 但是在内存中的虚拟dom不知道,所以他们比对以后,觉得没问题就会带着这个错乱的往下走 -->
        <!-- 就会导致这个被选中的走下去 -->
        <!-- 主要是针对非末尾元素的问题 -->
        <!-- push压入到末尾的元素不会导致这个问题,只有unshift到最前面的元素会产生这个问题 -->
        <!-- 不要使用默认的index就可以解决这个问题了 -->
    </div>
    <script>
        const vm = new Vue({
            el : "#app",
            data : {
                msg : "Hello",
                heros : [
                    {id:"101",name:"Jerry",power:10000},
                    {id:"102",name:"Tom",power:9000},
                    {id:"103",name:"Jack",power:8000},
                    {id:"104",name:"Rose",power:6000}
                ]
            },
            methods : {
                addHero()
                {
                    this.heros.unshift({id:"1000",name:"Top",power:4000});
                }
            }
        });
    </script>
</body>
</html>

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script src="../js/vue.js"></script>

    <style>

        th,td{border: 1px solid black;}

    </style>

</head>

<body>

    <div id="app">

        <h1>{{msg}}</h1>

        <table>

            <tr>

                <th>序号</th>

                <th>英雄</th>

                <th>能量值</th>

                <th>选择</th>

            </tr>

            <!-- VUE框架是采用了虚拟dom和diff算法来提高执行效率的 -->

            <!-- 虚拟dom是在内存中的dom对象 -->

            <!-- diff算法,可以快速比较两个对象的不同之处 -->

            <!-- 当我们没有设置key的时候,默认的key就是我们的index作为key的 -->

            <!-- v-for所在的标签中有一个很重要的属性key,这个key是这个dom元素的身份证号或者说唯一标识 -->

            <!-- 当我们没有设置key的时候默认为index作为key的标识 -->

            <!-- 内存中的虚拟dom生成的每一个tr上都会标识有一个唯一的key做区分 -->

            <!-- 类似于我们实体dom树上的id -->

            <!-- 当我们的diff算法比对时,发现没有变化,不会重新渲染,而是直接复用 -->

            <!-- 甚至连子元素都可以复用比较,不需要创建 -->

            <!-- 新的虚拟dom实际是在内存中的,他和老的已经渲染出来的实际dom进行比对 -->

            <!-- 比对不一样才修改,一样部分直接原地使用即可 -->

            <tr v-for="(hero,index) in heros" :key="hero.id">

                <td>{{index}}</td>

                <td>{{hero.name}}</td>

                <td>{{hero.power}}</td>

                <td><input type="checkbox"/></td>

            </tr>

        </table>

        <button @click="addHero()">按一下</button>

        <!-- 采用index作为key存在什么问题? -->

        <!-- 第一个问题,效率低 -->

        <!-- 尽管真实dom上我们已经按下或选中了这个复选框了 -->

        <!-- 但是在内存中的虚拟dom不知道,所以他们比对以后,觉得没问题就会带着这个错乱的往下走 -->

        <!-- 就会导致这个被选中的走下去 -->

        <!-- 主要是针对非末尾元素的问题 -->

        <!-- push压入到末尾的元素不会导致这个问题,只有unshift到最前面的元素会产生这个问题 -->

        <!-- 不要使用默认的index就可以解决这个问题了 -->

    </div>

    <script>

        const vm = new Vue({

            el : "#app",

            data : {

                msg : "Hello",

                heros : [

                    {id:"101",name:"Jerry",power:10000},

                    {id:"102",name:"Tom",power:9000},

                    {id:"103",name:"Jack",power:8000},

                    {id:"104",name:"Rose",power:6000}

                ]

            },

            methods : {

                addHero()

                {

                    this.heros.unshift({id:"1000",name:"Top",power:4000});

                }

            }

        });

    </script>

</body>

</html>

旧约Alatus
关注
  • 29
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue列表渲染中key的作用_Vue列表渲染中的key值的重要性
weixin_39851887的博客
12-20 747
1 .index值不是一定不变的，如果不加key值的话，删除前面的项。后面的index可能变也可能不变，比如加个定时器的时候会变，不加定时器不会变2 .不加key的话，更新机制的进行diff的时候是会全部比较的，比如删除第一个的话，后面的元素其实都不一样，会一项一项的比较。然后全部元素都替换，没有做到最小更新。而且里面的传的值也会变，如果这个时候你要根据里面的值删除元素的话，就会出错，尤其是加了定...
Vue2---虚拟DOM、diff算法、key值
Anorry的博客
08-09 166
虚拟DOM这个概念是在一种特性，在Vue1中是没有这个概念的。提出虚拟DOM是为了，就是希望我们写的代码不仅可以在浏览器里面运行，还可以在ios，安卓等手机端去运行。设置虚拟DOM之后，渲染的过程可以单独的去设计，比如说只负责数据改了之后虚拟DOM的重新生成，最终虚拟DOM变成什么样子可以由平台方去实现，这个是引入虚拟DOM的一个最大的好处。其实虚拟DOM本身很简单，它就，对象里面有属性，有键值对。但是怎么对象表示的含义变成真正的元素，这个由平台去决定，这个是虚拟DOM的好处。
Vue中的虚拟DOM、diff算法、key作用
猫老板的豆
05-15 837
diff 算法是一种优化手段，将前后两个模块进行差异化对比，修补（更新）差异的过程叫做patch(打补丁)为什么 vue ,react 这些框架中都会有 diff 算法呢？要知道渲染真实 DOM 的开销是很大的，比如有时候我们修改了某个数据，如果直接渲染到真实 DOM 上会引起整个 DOM 树的重绘和重排，有没有可能我们只更新我们修改的那一小块 DOM 而不要更新整个 DOM 呢？diff 算法能够帮助我们。当数据发生变化时，vue是怎么更新节点的？我们先根据真实 DOM 生成一棵（虚拟DOM）树，当。
Vue2 第六节 key的作用与原理
星星之火的语言c学习
07-30 288
（1）虚拟DOM（2）v-for中的key的作用。
Vue中，配合 key使用 v-for 可以提高性能的原因
qq_52902590的博客
08-21 142
提供了一种标记方式，告诉 Vue.js 哪些节点是唯一的，应该被保留，哪些节点是重复的，可以被删除和重新创建。这样，即使列表中的元素顺序改变了，Vue.js 也可以正确地识别出哪些节点需要保留，哪些可以删除，从而进行更有效的内存管理，避免内存的浪费。，Vue.js 可能会在删除一个元素时错误地保留了已经没有使用的虚拟节点，这会导致内存的浪费。可以帮助 Vue.js 正确地识别哪些节点应该被删除。渲染列表时，如果不使用。
Vue源码学习 - 虚拟Dom 和 diff算法
铁锤妹妹的博客
07-31 673
因为 Diff 算法，计算的就是虚拟 DOM 的差异，所以先铺垫一点点虚拟 DOM，了解一下其结构，再去看Diff 算法原理，循循渐进会更好些。 渲染真实的 DOM 时，并不是暴力覆盖原有的 DOM ，而是比对新旧两个vnode（虚拟节点），如果不是同一个节点，删除老的，替换成新的；如果是同一个节点，就复用老节点，增加新节点的属性。
web前端VUE框架-基础知识及核心原理
01-27
Vue 与其他类库和框架如 jQuery、Zepto、Underscore、Backbone、Angular、React、Uni-App、React Native 和 Flutter 相区别，提供了独特的功能和设计哲学。Vue 采用声明式编程方式，使开发者只需关注数据，而无需...
Vue的transition-group与Virtual Dom Diff算法的使用
10-15
而`Virtual DOM Diff`算法则是Vue渲染机制的核心部分，它用于高效地比较虚拟DOM树的旧版本和新版本，以最小化真实DOM的操作。 `transition-group` 和 `Virtual DOM Diff` 的结合在于，当在列表中进行增删操作时，`...
vue 源码解析之虚拟Dom-render
10-16
Vue.js 是一个流行的前端JavaScript框架，它的核心特性之一就是使用虚拟DOM来提高性能和效率。虚拟DOM是Vue在内存中构建的一种数据结构，它模拟了真实的DOM树，允许Vue在更新UI时进行高效的比较和更新操作。 在Vue...
virtual-dom：关于Vue，React，Preact和Omi等框架源码的解读
02-06
Vue的虚拟DOM算法也更加智能，例如使用“key”属性来优化Diff过程。 Preact是React的一个轻量级替代品，它的API与React高度兼容，但体积更小。Preact实现了自己的虚拟DOM库，称为“hyperscript”，在保持性能的同时...
diff和key的作用
m0_59070120的博客
07-30 489
存在指针的话，那么去旧的vnode的映射表中查找，如果没有的话真实dom会在newStart位置直接新增节点，有的话则会对比两者的内容是否有区别，没区别的话，那么会将旧节点对应的真实dom移到新节点的位置上；当页面数据发生变化时，vue会生成新的vnode并且提取出旧的vnode，分别给双方加上首尾指针，新的vnode为newStart和newEnd分别指向他的首尾节点，旧的vnode为oldStart和oldEnd也分别指向他的首尾节点。......
虚拟dom 和 diff算法
小海的博客
10-26 294
虚拟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中nextTick的原理与作用
fengjing81的专栏
07-24 747
Vue中的nextTick是一个非常重要的API，它允许开发者延迟回调函数的执行直到下次DOM更新循环之后。这一机制在Vue开发中非常有用，特别是在处理DOM更新和异步操作时。下面将详细解释nextTick的原理与作用。
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1058
本文介绍了电子签名、图片合成、及预览功能
Vue系列面试题
qq_44186810的博客
07-23 921
Vue2中采用Object.defineProperty来实现数据响应式，Object.definePropery虽然可以监听到数组的变化，但是由于在性能和体验的性价比上考虑，Vue2放弃了这个特性。1）v-for优先于v-if被解析，从源码中发现，先处理静态节点，在处理once，在处理for，在处理if，代码显示for的优先级比if高，断点调试也证实for优先于if。v-if：是惰性渲染机制，在属性初始为false时，组件就不会被渲染，直到条件为true，并且切换条件时会触发销毁/挂载组件。
前端Web-JavaScript(上)
Yu2uki的博客
07-31 949
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 523
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
【前端面试】九、框架
最新发布
weixin_49015558的博客
07-31 386
1 Vue2 实现方式 2 Vue3 实现方式 3 React 实现方式 4 Angular 实现方式
vue中的虚拟dom和diff算法
06-08
而Diff算法则是用于比较两个虚拟DOM树的算法。它会递归遍历两个虚拟DOM树的每个节点，比较其差异，并根据差异进行相应的DOM操作。其核心思想是尽可能地复用已有的DOM节点，避免不必要的DOM操作。 在Vue中，当数据...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值