VUE学习(五)、列表渲染之：key原理、列表过滤、列表排序

最新推荐文章于 2025-02-25 20:07:54 发布

夏至xz

最新推荐文章于 2025-02-25 20:07:54 发布

阅读量950

点赞数 2

分类专栏： VUE 文章标签： vue.js javascript 前端 vue 前端框架

本文链接：https://blog.youkuaiyun.com/qq_46452300/article/details/122280197

版权

VUE 专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了Vue中的列表渲染，包括v-for指令的使用，key的作用及其原理，以及如何进行列表的过滤和排序。强调了key在虚拟DOM中的重要性，指出使用唯一标识作为key的必要性，同时展示了如何通过filter和computed属性实现列表的过滤，以及如何根据条件对列表进行升序和降序排序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

VUE学习(五)——列表渲染之：key原理、过滤、排序

1、认识基本列表——v-for指令遍历列表

<!-- 
	v-for指令:
		1.用于展示列表数据
		2.语法：v-for="(item, index) in xxx" :key="yyy"
			in 和 of 都是一样的
		3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
-->

<html>
	<head>
		<meta charset="UTF-8" />
		<title>基本列表</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			v-for指令:
				1.用于展示列表数据
				2.语法：v-for="(item, index) in xxx" :key="yyy"
				   in 和 of 都是一样的
				3.可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
		-->
		<!-- 准备好一个容器-->
		<div id="root">
			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<ul>
				<!-- 最好不要这样做，尽量将key写出来（后边探讨） -->
				<li v-for="p of persons">
					{{p.name}}-{{p.age}}
				</li>
				<!-- 
					c为什么没显示？因为它根本没有，是一个unfind
				 -->
				<li v-for="(a,b,c) of persons">
					a:{{a}}---b:{{b}}---c:{{c}}
				</li>
			</ul>

			<!-- 遍历数组 -->
			<h2>人员列表（遍历数组）</h2>
			<ul>
				<!-- 
					(p,index)收到的参数
					1，遍历的（数组、对象、字符串、指定次数）中的单个对象
					2，遍历的集合(列表等)中当前的位置（下标或key值--eg遍历对象时就是key值）
				-->
				<li v-for="(p,index) of persons" :key="index">
					{{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 5" :key="index">
					{{index}}-{{number}}
				</li>
			</ul>
		</div>

		<script type="text/javascript">
			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}
					],
					car:{
						name:'奥迪A8',
						price:'70万',
						color:'黑色'
					},
					str:'hello'
				}
			})
		</script>
</html>

在这里插入图片描述

2、key的原理

面试题：react、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中未找到与新虚拟DOM相同的key
        创建新的真实DOM，随后渲染到到页面。
                        
3. 用index作为key可能会引发的问题：
    1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
        会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

    2. 如果结构中还包含输入类的DOM：
        会产生错误DOM更新 ==> 界面有问题。

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

关于 index 不推荐作为key的问题：

eg：实现如下特殊功能：

点击在序列前添加一个用户，并附带一个输入框：

<body>
    <!-- 
    面试题：react、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中未找到与新虚拟DOM相同的key
            创建新的真实DOM，随后渲染到到页面。
                            
    3. 用index作为key可能会引发的问题：
        1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
            会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

        2. 如果结构中还包含输入类的DOM：
            会产生错误DOM更新 ==> 界面有问题。

    4. 开发中如何选择key?:
        1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
        2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，
            使用index作为key是没有问题的。
    -->
    <!-- 准备好一个容器-->
    <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>
</body>
<script type="text/javascript">
    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 }
            ]
        },
        methods: {
            add() {
                const p = { id: "004", name: "醉瑾", age: 18 };
                this.persons.unshift(p); //unshift(obj)将新项添加到数组起始位置:
            }
        }
    });
</script>

正常情况下如图，我们能正确完成需求
在这里插入图片描述
那么问题来了

当之前的输入框已经存输入时我们再进行输入：
在这里插入图片描述

此时惊奇地发现输入竟然移位了？

这就是index会出现的一些问题

这里的这个问题是因为 vue 进行复用时发现了之前的 index=0 的对象是张三，但是新的数据中 index=0 是醉瑾，所以就选择转换一个真实 DOM 并使用醉瑾，但是，对比到 <input>时发现都是 input ，所以又决定复用，所以将张三的 input 给拿了过来。同样，接下来的李四、王五同样的原因。

而 id 等具有唯一性的 key 保证了复用过程中不会出错

3、列表过滤

<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>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false;
	//用watch实现
	//#region
	/* 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调用一下
					// 初始时 keyWord 是一个空字符串，js中一个字符串里一定包含空字符
					// 相当于 初始化 时先将列表全部展示（能匹配到全部）
					handler(val){
						this.filPerons = this.persons.filter((p)=>{
							return p.name.indexOf(val) !== -1 
						})
					}
				}
			}
		}) */
	//#endregion

	//当watch和computed都能实现时推荐使用computed实现
	//用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: {
			// 优点：不需要监视 keyWord,只需要告诉 vue 我需要keyWord参与filPersons的计算
			//       vue 便会自动找 keyWord 参与计算(少了一个自定义的监视)，更加简洁
			filPerons() {
				// filter会返回一个新的数组，不会改变原数组
				// 计算属性规定的返回语句
				return this.persons.filter((p) => {
					// 过滤条件
					// filter规定的返回语句
					return p.name.indexOf(this.keyWord) !== -1; //判断包含某个字符
				});
			}
		}
	});
</script>

在这里插入图片描述

4、列表排序

<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}}
				<input type="text" />
			</li>
		</ul>
	</div>
</body>
<script type="text/javascript">
	Vue.config.productionTip = false;

	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 != 0) {
					arr.sort((p1, p2) => {
						// 一个简单的三元表达式
						return this.sortType === 1 ? p2.age - p1.age : p1.age - p2.age;
					});
				}
				return arr;
			}
		}
	});
	//排序复习
	let arr = [1, 2, 3, 6, 3, 8, 5, 9, 4];
	arr.sort((a, b) => {
		// 升序
		// return a - b;
		// 降序
		return b - a;
	});
	console.log(arr);
</script>