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

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

news 2026/3/29 18:58:45

目录

一、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

老Mac升级指南：使用OpenCore Legacy Patcher让旧设备焕发新生

老Mac升级指南&#xff1a;使用OpenCore Legacy Patcher让旧设备焕发新生 【免费下载链接】OpenCore-Legacy-Patcher 体验与之前一样的macOS 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 随着苹果对旧款Mac的系统支持逐渐终止&#xff0…...

编程新知 2026/3/29 17:53:10

每日算法练习：LeetCode 151. 反转字符串中的单词 ✅

大家好&#xff0c;我是你们的算法小伙伴。今天我们来练习一道字符串处理的经典中等题 ——LeetCode 151. 反转字符串中的单词。这道题考察对空格和单词边界的处理&#xff0c;是面试中高频的字符串操作题。题目描述给你一个字符串 s&#xff0c;请你反转字符串中单词的顺序。单…...

编程新知 2026/3/29 17:02:34

Qwen3-0.6B-FP8辅助Java八股文学习：智能抽题与答案要点生成

Qwen3-0.6B-FP8辅助Java八股文学习&#xff1a;智能抽题与答案要点生成 1. 引言&#xff1a;当面试备考遇上AI 准备Java面试&#xff0c;尤其是那些经典的“八股文”题目&#xff0c;对很多程序员来说是个既熟悉又头疼的过程。你可能也经历过&#xff1a;面对厚厚的面试宝典&…...

编程新知 2026/3/29 16:04:17

AI芯片算力揭秘：从INT8到FP16，如何正确理解不同精度的TOPS值？

AI芯片算力揭秘&#xff1a;从INT8到FP16&#xff0c;如何正确理解不同精度的TOPS值&#xff1f; 当你在选购AI加速卡时&#xff0c;是否曾被厂商宣传的"200TOPS算力"搞得晕头转向&#xff1f;作为在边缘计算部署过数十个模型的工程师&#xff0c;我必须告诉你一个残…...

编程新知 2026/3/29 15:13:53

16张动图解析网络基础原理与应用

16张动图趣味解读网络原理1. 网络基础概念1.1 网络的定义与作用网络存在于日常生活中的每一个角落&#xff0c;电脑、打印机、手机、电视等设备都属于网络设备。通过网络连接这些设备&#xff0c;可以实现数据传输和共享&#xff0c;让工作生活更加便捷。典型的网络应用场景包括…...

编程新知 2026/3/29 12:48:16

3个超简单步骤：零门槛制作专业级AI视频

3个超简单步骤&#xff1a;零门槛制作专业级AI视频 【免费下载链接】Open-Sora Open-Sora&#xff1a;为所有人实现高效视频制作 项目地址: https://gitcode.com/GitHub_Trending/op/Open-Sora 在数字内容创作领域&#xff0c;AI视频生成技术正以前所未有的速度改变着创…...

编程新知 2026/3/29 11:55:51

AudioSeal Pixel Studio效果展示：ASMR音频高频细节保留下的水印稳定性验证

AudioSeal Pixel Studio效果展示&#xff1a;ASMR音频高频细节保留下的水印稳定性验证 1. 专业级音频水印技术新标杆 AudioSeal Pixel Studio是基于Meta开源的AudioSeal算法构建的音频保护工具&#xff0c;它重新定义了数字水印技术的标准。这款工具能够在保持原始音频质量的…...

编程新知 2026/3/29 11:49:43

FGSM对抗攻击实战：从理论到PyTorch代码的完整攻防演练

1. 对抗攻击入门&#xff1a;为什么你的AI模型会被"骗"&#xff1f; 想象一下&#xff0c;你训练了一个准确率高达99%的手写数字识别模型&#xff0c;但在实际应用中却发现它经常把"3"识别成"8"&#xff0c;把"6"识别成"0"。…...

编程新知 2026/3/29 11:23:19

Pixel Dream Workshop 团队协作：基于 GitHub 管理提示词库与生成资产

Pixel Dream Workshop 团队协作&#xff1a;基于 GitHub 管理提示词库与生成资产 1. 创意协作的痛点与解决方案 在数字创意领域&#xff0c;团队协作往往面临诸多挑战。创意想法难以系统化管理&#xff0c;优秀提示词散落在各个成员手中&#xff0c;生成参数缺乏统一标准&…...

编程新知 2026/3/29 7:21:23

RVC效果对比实测：原声vs克隆声，你能听出区别吗？

RVC效果对比实测&#xff1a;原声vs克隆声&#xff0c;你能听出区别吗&#xff1f; 1. 引言&#xff1a;AI语音克隆技术的新突破 想象一下&#xff0c;你最喜欢的歌手正在用你的声音唱歌&#xff0c;或者你的播客节目突然有了专业播音员的音色。这不再是科幻场景&#xff0c;…...

编程新知 2026/3/29 7:17:23