Vue的遍历(列表、对象、字符串、数字)、key的原理

于 2024-08-21 08:58:39 发布
阅读量1.1k 收藏 9
点赞数 22
分类专栏： Vue 文章标签： vue.js 遍历列表 遍历对象 遍历字符串 key的原理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yy8623977/article/details/131651638
版权

目录

1 遍历(列表、对象、字符串、数字)

key可以使用数据的唯一字段(最好)，也可以使用index(默认)

使用示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <h2>人员列表（遍历数组）</h2>
    <ul>
        <li v-for="(p,index) in persons" :key="p.id">
            {{p.name}}-{{p.age}}
        </li>
    </ul>

    <h2>汽车信息（遍历对象）</h2>
    <ul>
        <li v-for="(value,k) of car" :key="k">
            {{k}}-{{value}}
        </li>
    </ul>

    <h2>遍历字符串</h2>
    <ul>
        <li v-for="(char,index) of str" :key="index">
            {{char}}-{{index}}
        </li>
    </ul>

    <h2>遍历指定次数</h2>
    <ul>
        <li v-for="(number,index) of 3" :key="index">
            {{index}}-{{number}}
        </li>
    </ul>
</div>

<script type="text/javascript">

    new Vue({
        el: '#root',
        data: {
            persons: [
                {id: '001', name: '张三', age: 18},
                {id: '002', name: '李四', age: 19},
                {id: '003', name: '王五', age: 20}
            ],
            car: {
                name: '苹果',
                price: '6元',
                color: '红色'
            },
            str: 'hello'
        }
    })
</script>

</body>
</html>

显示效果
遍历效果

2. key的原理

2.1 key使用index

我们先看如下的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <h2>人员列表（遍历数组）</h2>
    <button @click.once="add">添加一个老刘</button>
    <ul>
        <li v-for="(p,index) of persons" :key="index">
            {{p.name}}-{{p.age}}
            <input type="text">
        </li>
    </ul>
</div>

<script type="text/javascript">

    new Vue({
        el: '#root',
        data: {
            persons: [
                {id: '001', name: '张三', age: 18},
                {id: '002', name: '李四', age: 19},
                {id: '003', name: '王五', age: 20}
            ]
        },
        methods: {
            add() {
                const p = {id: '004', name: '老刘', age: 40}
                this.persons.unshift(p)
            }
        }
    })
</script>

</body>
</html>

输入框输入内容如下：
人员列表

再点击添加一个老刘。结果如下

添加老刘

内部发生的过程如下：

index作为key

2.1 key使用数据的唯一id

这里代码还是和上面的一样，只是修改为:key="p.id"

输入框输入内容如下：
人员列表

再点击添加一个老刘。结果如下
添加老刘

内部发生的过程如下：
id作为key

2.3 key的原理

key的内部原理）

  • 虚拟DOM中key的作用：

    • key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】
    • 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

  • 对比规则：

    • 旧虚拟DOM中找到了与新虚拟DOM相同的key：

      • 若虚拟DOM中内容没变, 直接使用之前的真实DOM
      • 若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM

    • 旧虚拟DOM中未找到与新虚拟DOM相同的key

      • 创建新的真实DOM，随后渲染到到页面

  • 用index作为key可能会引发的问题：

    • 若对数据进行：逆序添加、逆序删除等破坏顺序操作: 会产生没有必要的真实DOM更新，界面效果没问题, 但效率低
    • 如果结构中还包含输入类的DOM：会产生错误DOM更新，界面有问题

  • 开发中如何选择key?:

    • 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值
    • 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的

3. 列表过滤

使用计算属性和监测属性实现列表过滤，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入名字" v-model="keyWord">
    <ul>
        <li v-for="(p,index) of filPerons" :key="p.id">
            {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
    </ul>
</div>

<script type="text/javascript">

    //用watch实现
    /* new Vue({
        el: '#root',
        data: {
            keyWord: '',
            persons: [
                {id: '001', name: '马冬梅', age: 19, sex: '女'},
                {id: '002', name: '周冬雨', age: 20, sex: '女'},
                {id: '003', name: '周杰伦', age: 21, sex: '男'},
                {id: '004', name: '温兆伦', age: 22, sex: '男'}
            ],
            filPerons: []
        },
        watch: {
            keyWord: {
                immediate: true,
                handler(val) {
                    this.filPerons = this.persons.filter((p) => {
                        return p.name.indexOf(val) !== -1
                    })
                }
            }
        }
    }) */

    //用computed实现
    new Vue({
        el: '#root',
        data: {
            keyWord: '',
            persons: [
                {id: '001', name: '马冬梅', age: 19, sex: '女'},
                {id: '002', name: '周冬雨', age: 20, sex: '女'},
                {id: '003', name: '周杰伦', age: 21, sex: '男'},
                {id: '004', name: '温兆伦', age: 22, sex: '男'}
            ]
        },
        computed: {
            filPerons() {
                return this.persons.filter((p) => {
                    return p.name.indexOf(this.keyWord) !== -1
                })
            }
        }
    })
</script>

</body>
</html>

显示效果
列表过滤

4. 列表排序

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javaScript" src="../js/vue.js"></script>
</head>
<body>

<div id="root">
    <h2>人员列表</h2>
    <input type="text" placeholder="请输入名字" v-model="keyWord">
    <button @click="sortType = 2">年龄升序</button>
    <button @click="sortType = 1">年龄降序</button>
    <button @click="sortType = 0">原顺序</button>
    <ul>
        <li v-for="(p,index) of filPerons" :key="p.id">
            {{p.name}}-{{p.age}}-{{p.sex}}
        </li>
    </ul>
</div>

<script type="text/javascript">

    new Vue({
        el: '#root',
        data: {
            keyWord: '',
            sortType: 0, // 0原顺序 1降序 2升序
            persons: [
                {id: '001', name: '马冬梅', age: 30, sex: '女'},
                {id: '002', name: '周冬雨', age: 31, sex: '女'},
                {id: '003', name: '周杰伦', age: 18, sex: '男'},
                {id: '004', name: '温兆伦', age: 19, sex: '男'}
            ]
        },
        computed: {
            filPerons() {
                const arr = this.persons.filter((p) => {
                    return p.name.indexOf(this.keyWord) !== -1
                })
                // 判断一下是否需要排序
                if (this.sortType) {
                    arr.sort((p1, p2) => {
                        return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age
                    })
                }
                return arr
            }
        }
    })
</script>

</body>
</html>

效果如下：
列表排序

Bulut0907
关注
专栏目录
【VUE】遍历列表
XiaoYabeI的博客
02-14 3453
条件渲染 v-if 写法： v-if="表达式" v-else-if="表达式" v-else="表达式" 适用于：切换频率较低的场景 特点：不展示的DOM元素直接被移除 注意：v-if可以和:v-else-if、v-else一起使用，但要求结构不能被"打断" v-show 写法：v-show="表达式" 适用于：切换频率较高的场景 特点：不展示DOM元素未被移除，仅仅是使用样式隐藏掉 备注：使用v-if的时候，元素可能无法获取到，而使
vue 循环遍历字符串_Vue 循环遍历 v-for
weixin_39725924的博客
12-20 3409
v-for遍历数组渲染一组数据的时候用 v-forv-for的语法类似于JavaScript中的for循环格式如下：item in items的形式我们来看一个简单的案例：如果在遍历的过程中不需要使用索引值v-for="movie in movies"依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie如果在遍历的过程中，我们需要拿到元素在数组...
vue 数据遍历筛选 过滤 排序的应用
wngzhem的博客
11-21 3万+
vue 中对v-for 遍历数据的处理方式 可以分为两类 ： 一.对data 直接赋值（比较笨，但是比较直接） {{item.n}} var app=new Vue({ el:'#app', data:{ l
Vue之循环遍历
最新发布
weixin_42242810的博客
08-21 193
在Vue.js中，循环遍历数据通常使用v-for指令。v-for指令可以用于遍历数组或对象，并生成对应的DOM元素。
key的原理（vue）
qq_52135740的博客
07-27 653
面试题：vue中的key有什么作用？（key的内部原理） 1. 虚拟DOM中key的作用： key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】, 随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 2.对比规则： (1).旧虚拟DOM中找到了与新虚拟DOM相同的key： ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！ ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。 (2).旧虚拟DOM中未找到
vue-遍历
weixin_59202218的博客
05-29 2060
作用：key 一般配合v-for一起使用. 用来在特定情况下, 保证被遍历的数组中的元素的顺序.概述：vue中的v-for是非常重要的语法，掌握的v-for就几乎能完成绝大多数页面处理。语法：v-for="(value,key,index) in object"index：迭代到的当前元素索引，从0开始。语法：v-for="(item,index) in items"item：存储数组元素的变量名。index, 索引，从0开始。解析：items：要迭代的数组。解析：value，对象的值。
Vue js 对List进行遍历、过滤、排序、分组
gdgztt的专栏
11-27 4530
Vue js 对List进行遍历、过滤、排序、分组 1、遍历（forEach）2、循环（filter）3、排序（sort）4、分组（groupBy）
vue 解决遍历对象显示的顺序不对问题
10-16
总之，当遇到Vue遍历对象显示顺序不正确的问题时，通过先对数组进行排序，然后再遍历排序后的数组构建对象，可以确保在模板中遍历对象时的顺序与预期相符。这是一个常见的技巧，对于理解和优化Vue应用的性能非常重要...
解决vue v-for 遍历循环时key值报错的问题
10-18
让我们来看一下错误提示：“[Vue warn] Avoid using non-primitive value as key, use string/number value instead.” 这个警告意味着你在`v-for`中使用的`key`不是一个原始类型，如字符串或数字，而是一个对象或...
vue 根据名称更改对象顺序_vue 解决遍历对象显示的顺序不对问题
weixin_39637919的博客
12-20 1771
vue 解决遍历对象显示的顺序不对问题一、情况说明：在wacth里面生成了一个日期字符串的的数组(如下图1)，如果遍历这个数组生成一个以日期为key的Object，但是数组里面的元素顺序和Object的属性的顺序是不一样的，并且在vue模板中遍历这个Object并显示key，得到的是数组的元素顺序(如下图2)！图1图2二、过程分析：问题出在了遍历数组得到对象上，这个时候的顺序变了三、解决方法：先给...
vue遍历中key详解 (Demo案例）
辰兮要努力
02-19 4926
【辰兮要努力】：hello你好我是辰兮，很高兴你能来阅读，昵称是希望自己能不断精进，向着优秀程序员前行！ 博客来源于项目以及编程中遇到的问题总结，偶尔会有读书分享，我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结，感谢你的阅读和关注，希望我的博客能帮助到更多的人，分享获取新知，大家一起进步! 吾等采石之人，应怀大教堂之心，愿你们奔赴在各自的热爱中… 文章目录一、key序言二、key讲解三、key拓展 一、key序言 做vue项目，之前做到关于遍历数组对象找那个的数组，里面涉及到ke.
Vue的循环遍历
helongzhi的博客
08-02 8305
​ 一般需要使用索引值。index表示索引，item表示当前遍历的元素。
vue 遍历
weixin_42486438的博客
06-10 791
<!doctype html> <html> <head> <meta charset="utf-8"> <title>遍历</title> <script src="js/vue.min.js"></script> </head> <body> <style> ...
从数据库中拿数据总是拿到上一条数据，还能拿到删除的表的数据
qq_45800951的博客
11-03 232
000
Vue中的数组遍历
STATICHIT静砸的博客
12-22 7898
2、使用filter循环，代码为【return this.urls.filter(item =>】1、使用foreach循环，代码为【this.urls.forEach(item =>】forEach() 方法主要是用于调用数组的每个元素，并将元素传递给回调函数。forEach(): 遍历数组需要一个回调函数作为参数。注:对于空数组不会执行回调函数。
Vue 遍历数据
weixin_45079974的博客
06-19 867
<template> <div> <ul> <li v-for="item in list" :key="item">{{item}}</li> </ul> <ul> <li v-for="(item,index) in list" :key="item">{{index}}--{{item}}</li> &l
Vue的遍历中Key的作用
u014046079的博客
04-06 606
<h3>123</h3>
vue的循环遍历(v-for)
热门推荐
韩旭不会敲代码吧的博客
08-01 3万+
1.循环遍历 1.循环遍历: vue的循环遍历用v-for，语法类似于js中的for循环 当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。 2.v-for使用格式： 格式为：v-for = "item in items" (遍历items中的数据) 2.v-for遍历数组 1.v-for遍历数组 用v-for指令基于一个数组来渲染一个列表。 v-for 指令使用item in items形式的语法， 其中items是源
Vue：循环遍历（v-for）
yufengguanyun的博客
03-05 1万+
1、v-for （1）遍历数组 直接遍历，不使用下标 <div id="app"> <ul> <li v-for="item in names">{{item}}</li> </ul> </div> <script src="../js/vue.js"></script> <script> const app = new Vue({ el: '#app',
vue for怎么遍历字符串
06-07
你可以使用 JavaScript 的字符串遍历方法来遍历一个字符串。在 Vue 模板中，你可以使用 v-for 指令来循环遍历一个数组或对象。如果你想要遍历一个字符串，你可以先将字符串转换成一个数组，然后再使用 v-for 指令来遍历数组。 以下是一个例子： ```html <template> <div> <p v-for="(char, index) in strArray" :key="index">{{ char }}</p> </div> </template> <script> export default { data() { return { str: 'hello world', strArray: [] } }, created() { this.strArray = this.str.split('') } } </script> ``` 在上面的例子中，我们将字符串 `hello world` 转换成了一个数组，并将数组赋值给了 `strArray`。然后，在模板中使用 v-for 指令来遍历 `strArray`，并输出每个字符到页面上。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值