当前位置： 首页 > news >正文

key的作用原理与列表的遍历、追加、搜索、排序

news 2026/2/9 17:33:28

目录

一、key的作用原理

二、实现列表遍历并对在列表最前方进行追加元素

三、实现列表过滤搜索

1、用computed计算属性来实现

2、用watch监听输入值的变化来实现

四、按年龄排序输出列表

一、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是没有问题的。

二、实现列表遍历并对在列表最前方进行追加元素

追加采用unshift函数，在最前面追加，若此时的key='index'，因为有输入类DOM更新则会产生错误，所以应给其特定的id。若用push在最后方追加，则key=‘index’不存在问题

 

代码部分

<div id="root"><h4>一、人员遍历</h4><button @click="add">添加一个老刘</button><!-- 让每一位人都有一个 自己特定的id --><ul><li v-for="person in persons" :key="person.id">{{person.name}}-{{person.age}}<input type="text"></li></ul></div><script text="text/javascript">new Vue({el:"#root",data:{persons:[{id:'001',name:'张三',age:'21'},{id:'002',name:'李四',age:'20'},{id:'003',name:'王五',age:'22'},]},methods: {add(){const s={id:'004',name:'老刘',age:20}// 追加数据，在前面追加this.persons.unshift(s)}},})</script>

三、实现列表过滤搜索

1、用computed计算属性来实现

将filter过滤器得到的结果返回给新的对象，遍历新的对象实现搜索功能

<body><div id="root"><h4>一、人员遍历</h4><input type="text" v-model="keyword"><ul><li v-for="person in  filterpersons" :key="persons.id">{{person.name}}-{{person.age}}--{{person.sex}}</li></ul></div><script text="text/javascript">// 用计算属性实现new Vue({el:"#root",data:{keyword:'',persons:[{id:'001',name:'马冬梅',age:'21',sex:'女'},{id:'002',name:'周杰伦',age:'20',sex:'男'},{id:'003',name:'周冬雨',age:'22',sex:'女'},{id:'004',name:'周天气',age:'24',sex:'男'},{id:'005',name:'马万里',age:'23',sex:'男'},],},computed:{// 计算属性的值为其返回的值，其默认是一开始就加载filterpersons(){return  this.persons.filter((person)=>{// 找不到返回的就是-1，找到的话是正常的下标return  person.name.indexOf(this.keyword)!==-1})}}})

2、用watch监听输入值的变化来实现

将computed部分替换为watch

watch:{keyword:{immediate:true,其val相当于keyword新的值handler(val){this.filterpersons=this.persons.filter((person)=>{return person.name.indexOf(val)!==-1})}}
}

四、按年龄排序输出列表

在搜索的基础上对年龄进行升序、降序输出调用sort函数

代码部分

new Vue({el:"#root",//0原序，1升序，2降序data:{keyword:'',sortType:0,persons:[{id:'001',name:'马冬梅',age:'21',sex:'女'},{id:'002',name:'周杰伦',age:'20',sex:'男'},{id:'003',name:'周冬雨',age:'22',sex:'女'},{id:'004',name:'周天气',age:'24',sex:'男'},{id:'005',name:'马万里',age:'23',sex:'男'},],},computed:{filterpersons(){const arr= this.persons.filter((person)=>{return  person.name.indexOf(this.keyword)!==-1})// 需要判断其是否需要排序if(this.sortType){arr.sort((p1,p2)=>{return this.sortType===1?p1.age-p2.age:p2.age-p1.age})}return arr},}})

相关文章：

key的作用原理与列表的遍历、追加、搜索、排序

目录 一、key的作用原理 二、实现列表遍历并对在列表最前方进行追加元素 三、实现列表过滤搜索 1、用computed计算属性来实现 2、用watch监听输入值的变化来实现 四、按年龄排序输出列表 一、key的作用原理 1. 虚拟DOM中key的作用&#xff1a; key是虚拟DOM对象的标识&a…...

编程日记 2023/2/19 15:57:04

SQL性能优化的47个小技巧，你了解多少？

收录于热门专栏Java基础教程系列&#xff08;进阶篇&#xff09; 1、先了解MySQL的执行过程 了解了MySQL的执行过程&#xff0c;我们才知道如何进行sql优化。 客户端发送一条查询语句到服务器&#xff1b;服务器先查询缓存&#xff0c;如果命中缓存&#xff0c;则立即返回存…...

编程日记 2023/2/19 15:55:55

DPDK — 数据加速方案的核心思想

目录 文章目录 目录DPDK 数据加速方案1、使用用户态协议栈来代替内核协议栈Linux UIO FrameworkDPDK UIO Framework2、使用轮训来代替中断Kernelspace igb_uio DriverUserspace PMD3、使用多核编程代替多线程无锁环队列：CPU 核间无锁通信DPDK 数据加速方案...

编程日记 2023/2/19 15:54:51

[python入门㊽] - 自定义异常 raise 关键字

目录 ❤ 自定义抛出异常关键字 - raise ❤ 使用raise主动引发异常 ❤ raise 关键字的用法 ❤ 触发异常 ❤ 自定义异常类 在前面我们学过异常三个关键字分别是try、except 以及 finally 在编程过程中合理的使用异常可以使得程序正常的执行。有直接抛出异常的形式&…...

编程日记 2023/2/19 15:53:46

DDOS攻击

注&#xff1a;本博客只是为了自己的学习&#xff0c;记录自己的学习&#xff0c;请勿用于其他途径、1、winR-->cmd2、ping 网站3、替换IP1 import java.io.BufferedInputStream;2 import java.io.IOException;3 import java.net.MalformedURLException;4 import java.net.U…...

编程日记 2023/2/19 15:52:40

网络编程套接字

文章目录1. socket编程接口1-1 socket 常见API1-2 sockaddr结构2. 简单的UDP网络程序2-1 日志&#xff08;固定用法&#xff1a;标准部分自定义部分&#xff09;2-2 服务器代码实现1. 框架2. 初始化服务器3. 服务器运行4. 调用服务器封装函数&#xff08;UdpServer&#xff09;…...

编程日记 2023/2/19 15:51:33

海量数据相似数据查询方法

1、海量文本常见 海量文本场景&#xff0c;如何寻找一个doc的topn相似doc&#xff0c;一般存在2个问题&#xff0c; 1)、两两对比时间o(n^2) 2)、高维向量比较比较耗时。 文本集可以看成(doc,word)稀疏矩阵&#xff0c;一般常见的方法是构建到排索引&#xff0c;然后进行归并…...

编程日记 2023/2/19 15:50:28

Codeforces Round #822 (Div. 2)

A(签到) - Select Three Sticks 题意&#xff1a; 给你一个长度为 n 的正整数序列&#xff0c;你可以操作任意次&#xff0c;每一次操作可以选择任意一个元素&#xff0c;把它 1 或者 - 1&#xff0c;问最少多少次操作可以使得序列中存在三个相同的数字以构成一个等边三角形.…...

编程日记 2023/2/19 15:49:21

华为OD机试 - 最短木板长度（JS）

最短木板长度 题目 小明有 n n n块木板，第 i i i(1≤ i i </...

编程日记 2023/2/19 15:48:16

java设计模式——观察者模式

概述 定义:又被称为发布-订阅(Publish/Subscribe)模式&#xff0c;它定义了一种一对多的依赖关系&#xff0c;让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时&#xff0c;会通知所有的观察者对象&#xff0c;使他们能够自动更新自己。 结构 在观察者模式…...

编程日记 2023/2/19 15:47:09

linux高级命令之线程的注意点

线程的注意点学习目标能够说出线程的注意点1. 线程的注意点介绍线程之间执行是无序的主线程会等待所有的子线程执行结束再结束线程之间共享全局变量线程之间共享全局变量数据出现错误问题2. 线程之间执行是无序的import threading import timedeftask():time.sleep(1)print(&qu…...

编程日记 2023/2/19 15:46:05

MyBatisPlus ---- 多数据源

MyBatisPlus ---- 多数据源1. 创建数据库及表2. 引入依赖3. 配置多数据源4. 创建用户service5. 创建商品service6. 测试适用于多种场景&#xff1a;纯粹多库、读写分离、一主多从、混合模式等 目前我们就来模拟一个纯粹多库的一个场景&#xff0c;其他场景类似 场景说明&#x…...

编程日记 2023/2/19 15:44:59

Java多线程

目录1 多线程1.1 进程1.2 线程1.3 多线程的实现方式1.3.1 方式1&#xff1a;继承Tread类1.3.2 方式2&#xff1a;实现Runnable接口1.3.3 方式3&#xff1a;实现Callable接口1.4 设置和获取线程名称1.5 线程调度1.6 线程控制1.7 线程生命周期1.8 数据安全问题之案例&#xff1a;…...

编程日记 2023/2/19 15:43:53

linux高级命令之线程执行带有参数的任务

线程执行带有参数的任务学习目标能够写出线程执行带有参数的任务1. 线程执行带有参数的任务的介绍前面我们使用线程执行的任务是没有参数的&#xff0c;假如我们使用线程执行的任务带有参数&#xff0c;如何给函数传参呢?Thread类执行任务并给任务传参数有两种方式:args 表示以…...

编程日记 2023/2/19 15:42:47

管理会计报告和财务报告的区别

财务会计报告是给投资人看的&#xff0c;可以反映公司总体的盈利能力。不过&#xff0c;我们回顾一下前面“第一天”里面提到的问题。如果你是公司的产品经理&#xff0c;目前有三个产品在你的管辖范围内。上级给你一笔新的资金&#xff0c;这笔资金应该投到哪个产品上&#xf…...

编程日记 2023/2/19 15:41:39

华为OD机试 - 最左侧冗余覆盖子串（Python） | 机试题算法思路 【2023】

最近更新的博客 华为OD机试 - 自动曝光（Python） | 机试题算法思路 【2023】 华为OD机试 - 双十一（Python） | 机试题算法思路 【2023】 华为OD机试 - 删除最少字符（Python） | 机试题算法思路 【2023-02】 华为OD机试 - Excel 单元格数值统计（Python） | 机试题算法思路 …...

编程日记 2023/2/19 15:40:31

【Opencv 系列】第1章 图像基础

通过本套课程,可以学到: 1.opencv的基本操作 2.两个案例,目标追踪&人脸识别 对重点内容,我会提示,包括我再准备这套课程过程中遇到的坑点! 最后代码我会放到git上,章节顺序一致:https://github.com/justinge/opencv_tutorial.git 系列文章目录 第1章 Opencv 图像基础 和 …...

编程日记 2023/2/19 15:39:24

创建和销毁对象——遇到多个构造器参数时要考虑使用构建器

静态工厂和构造器有个共同的局限性&#xff1a;它们都不能很好地扩展到大量的可选参数。比如用一个类表示包装食品外面显示的营养成分标签。这些标签中有几个域是必需的&#xff1a;每份的含量、每罐的含量以及每份的卡路里。还有超过20个的可选域&#xff1a;总脂肪量、饱和脂…...

编程日记 2023/2/19 15:38:18

【c++学习】入门c++（中）

目录一. 前言二. 函数重载1. 概念2.函数名修饰规则三 .引用&#xff08;&&#xff09;1. 概念2. 引用特性3.应用1.做参数2. 做返回值3. 传值、传引用效率比较4.引用和指针的区别四 . 结语一. 前言 小伙伴们大家好&#xff0c;今天我们继续学习c入门知识&#xff0c;今天的…...

编程日记 2023/2/19 15:36:06

论文阅读_AlphaGo_Zero

论文信息 name_en: Mastering the game of Go without human knowledge name_ch: 在没有人类知识的情况下掌握围棋游戏 paper_addr: http://www.nature.com/articles/nature24270 doi: 10.1038/nature24270 date_publish: 2017-10-01 tags: [‘深度学习’,‘强化学习’] if: 6…...

编程日记 2023/2/19 15:35:00

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2026/2/6 23:18:59

2025盘古石杯决赛【手机取证】

前言 第三届盘古石杯国际电子数据取证大赛决赛 最后一题没有解出来&#xff0c;实在找不到&#xff0c;希望有大佬教一下我。 还有就会议时间&#xff0c;我感觉不是图片时间&#xff0c;因为在电脑看到是其他时间用老会议系统开的会。 手机取证 1、分析鸿蒙手机检材&#x…...

编程新知 2026/1/29 17:12:17

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...

编程新知 2026/2/4 17:42:50

SQL Server 触发器调用存储过程实现发送 HTTP 请求

文章目录 需求分析解决第 1 步：前置条件，启用 OLE 自动化方式 1：使用 SQL 实现启用 OLE 自动化方式 2：Sql Server 2005启动OLE自动化方式 3：Sql Server 2008启动OLE自动化第 2 步：创建存储过程第 3 步：创建触发器扩展 - 如何调试？第 1 步：登录 SQL Server 2008第 2 步…...

编程新知 2025/9/11 6:56:11

Unity中的transform.up

2025年6月8日&#xff0c;周日下午 在Unity中&#xff0c;transform.up是Transform组件的一个属性&#xff0c;表示游戏对象在世界空间中的“上”方向&#xff08;Y轴正方向&#xff09;&#xff0c;且会随对象旋转动态变化。以下是关键点解析&#xff1a; 基本定义 transfor…...

编程新知 2026/2/8 1:53:31

【深度学习新浪潮】什么是credit assignment problem？

Credit Assignment Problem（信用分配问题） 是机器学习，尤其是强化学习（RL）中的核心挑战之一，指的是如何将最终的奖励或惩罚准确地分配给导致该结果的各个中间动作或决策。在序列决策任务中，智能体执行一系列动作后获得一个最终奖励，但每个动作对最终结果的贡献程度往往…...

编程新知 2026/1/30 14:23:04

【Kafka】Kafka从入门到实战：构建高吞吐量分布式消息系统

Kafka从入门到实战：构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台，最初由LinkedIn开发，后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理，能够处理来自多个生产者的海量数据，并将这些数据实时传递给消费者。 Kafka核心特…...

编程新知 2025/7/18 7:59:36

海云安高敏捷信创白盒SCAP入选《中国网络安全细分领域产品名录》

近日&#xff0c;嘶吼安全产业研究院发布《中国网络安全细分领域产品名录》&#xff0c;海云安高敏捷信创白盒&#xff08;SCAP&#xff09;成功入选软件供应链安全领域产品名录。 在数字化转型加速的今天&#xff0c;网络安全已成为企业生存与发展的核心基石&#xff0c;为了解…...

编程新知 2026/2/8 13:00:10

Cursor AI 账号纯净度维护与高效注册指南

Cursor AI 账号纯净度维护与高效注册指南&#xff1a;解决限制问题的实战方案 风车无限免费邮箱系统网页端使用说明|快速获取邮箱|cursor|windsurf|augment 问题背景 在成功解决 Cursor 环境配置问题后&#xff0c;许多开发者仍面临账号纯净度不足导致的限制问题。无论使用 16…...

编程新知 2026/1/15 20:22:22