Vue中v-for循环语句使用，以及其中key的原理

最新推荐文章于 2024-09-16 09:12:31 发布

浪漫主义码农

最新推荐文章于 2024-09-16 09:12:31 发布

阅读量709

点赞数 3

分类专栏： Vue 文章标签： vue.js javascript html5

本文链接：https://blog.csdn.net/Mq_sir/article/details/120308801

版权

Vue 专栏收录该内容

11 篇文章 6 订阅

订阅专栏

本文介绍了Vue中v-for循环的使用，包括遍历数组、对象和字符串，并强调了key属性的重要性。key作为虚拟DOM的标识，在Diff算法中起到关键作用，用于优化DOM更新。正确使用key可以避免不必要的DOM操作，提高渲染效率。开发中，推荐使用数据的唯一标识作为key，以避免某些操作导致的效率降低或界面问题。

摘要由CSDN通过智能技术生成

Vue中v-for循环语句使用，以及其中key的原理

一、列表渲染

在我们使用v-for的场景中，使用最多的就是用来渲染列表。渲染的数据主要有数组、对象、字符串等。
常用的三种：

遍历数组
迭代对象
字符串
遍历指定次数

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue/js/vue.js" type="text/javascript"></script>
</head>
<body>
    <div id="root">
        <h2>人员列表（数组遍历）</h2>
        <ul>
            <li v-for="p in persons" :key='index'>
                {{p.name}}--{{p.age}}
            </li>
        </ul>
        <h2>老王（ 对象遍历）</h2>
        <ul>
            <li v-for="p in man" :key="index">
                {{p}}
            </li>
        </ul>
        <h2>字符串遍历</h2>
        <ul>
            <li v-for="p in str" :key="index">
                {{p}}
            </li>
        </ul>
    </div>

    <script>

Vue.config.productionTip=false
new Vue({
    el:'#root',
    data:{
        persons:[
            {id:'001',name:'张三',age:18},
            {id:'002',name:'李四',age:19},
            {id:'003',name:'王五',age:20}
        ],
        man:{
            name:'老王',
            age:30,
            hobby:'干饭'
        },
        str:'maoxiaoqian',
    }
})

    </script>
</body>
</html>

小结
v-for指令：

大多数用于展示数据
基本的语法v-for="（item,index ）in persons" :key='index',item为每一下项的value值，index为vue给定的标识符，每一个v-for都应该绑定:key为标识符，或者说是索引值。

二、key的原理

key的原理主要就是vue中的Diff算法

vue和react一样，都实现了一套虚拟dom,使我们可以不直接操作dom元素，只操作数据就可以重新渲染页面。这就用到Diff比较算法。
虚拟DOM中key的作用:
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据新数据生成新的虚拟DOM,随后Vue进行新虚拟DOM与旧虚拟DOM的差异比较
对比规则：
旧虚拟DOM中找到了与新虚拟DOM相同的key:
- 若虚拟DOM中内容没变,直接使用之前的真实DOM !
- 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DON。
旧虚拟DOM中未找到与新虚拟DOM相同的key
- 创建新的真实DOM,随后渲染到到页面。
用index作为key可能会引发的问题:
若对数据进行:逆序添加、逆序删除等破坏顺序操作;
会产生没有必要的真实DOM更新==〉界面效果没问题，但效率低。
如果结构中还包含输入类的DOM:会产生错误DOM更新==>界面有问题。