key的作用原理与列表的遍历、追加、搜索、排序
目录
一、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的作用： key是虚拟DOM对象的标识&a…...
SQL性能优化的47个小技巧，你了解多少？
收录于热门专栏Java基础教程系列（进阶篇） 1、先了解MySQL的执行过程 了解了MySQL的执行过程，我们才知道如何进行sql优化。 客户端发送一条查询语句到服务器；服务器先查询缓存，如果命中缓存，则立即返回存…...
DPDK — 数据加速方案的核心思想
目录 文章目录 目录DPDK 数据加速方案1、使用用户态协议栈来代替内核协议栈Linux UIO FrameworkDPDK UIO Framework2、使用轮训来代替中断Kernelspace igb_uio DriverUserspace PMD3、使用多核编程代替多线程无锁环队列：CPU 核间无锁通信DPDK 数据加速方案...
[python入门㊽] - 自定义异常 raise 关键字
目录 ❤ 自定义抛出异常关键字 - raise ❤ 使用raise主动引发异常 ❤ raise 关键字的用法 ❤ 触发异常 ❤ 自定义异常类 在前面我们学过异常三个关键字分别是try、except 以及 finally 在编程过程中合理的使用异常可以使得程序正常的执行。有直接抛出异常的形式&…...
DDOS攻击
注：本博客只是为了自己的学习，记录自己的学习，请勿用于其他途径、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…...
网络编程套接字
文章目录1. socket编程接口1-1 socket 常见API1-2 sockaddr结构2. 简单的UDP网络程序2-1 日志（固定用法：标准部分自定义部分）2-2 服务器代码实现1. 框架2. 初始化服务器3. 服务器运行4. 调用服务器封装函数（UdpServer）…...
海量数据相似数据查询方法
1、海量文本常见 海量文本场景，如何寻找一个doc的topn相似doc，一般存在2个问题， 1)、两两对比时间o(n^2) 2)、高维向量比较比较耗时。 文本集可以看成(doc,word)稀疏矩阵，一般常见的方法是构建到排索引，然后进行归并…...
)
Codeforces Round #822 (Div. 2)
A(签到) - Select Three Sticks 题意： 给你一个长度为 n 的正整数序列，你可以操作任意次，每一次操作可以选择任意一个元素，把它 1 或者 - 1，问最少多少次操作可以使得序列中存在三个相同的数字以构成一个等边三角形.…...
华为OD机试 - 最短木板长度（JS）
最短木板长度 题目 小明有 n n n块木板，第 i i i(1≤ i i </...
java设计模式——观察者模式
概述 定义:又被称为发布-订阅(Publish/Subscribe)模式，它定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个主题对象。这个主题对象在状态变化时，会通知所有的观察者对象，使他们能够自动更新自己。 结构 在观察者模式…...
linux高级命令之线程的注意点
线程的注意点学习目标能够说出线程的注意点1. 线程的注意点介绍线程之间执行是无序的主线程会等待所有的子线程执行结束再结束线程之间共享全局变量线程之间共享全局变量数据出现错误问题2. 线程之间执行是无序的import threading import timedeftask():time.sleep(1)print(&qu…...
MyBatisPlus ---- 多数据源
MyBatisPlus ---- 多数据源1. 创建数据库及表2. 引入依赖3. 配置多数据源4. 创建用户service5. 创建商品service6. 测试适用于多种场景：纯粹多库、读写分离、一主多从、混合模式等 目前我们就来模拟一个纯粹多库的一个场景，其他场景类似 场景说明&#x…...
Java多线程
目录1 多线程1.1 进程1.2 线程1.3 多线程的实现方式1.3.1 方式1：继承Tread类1.3.2 方式2：实现Runnable接口1.3.3 方式3：实现Callable接口1.4 设置和获取线程名称1.5 线程调度1.6 线程控制1.7 线程生命周期1.8 数据安全问题之案例：…...
linux高级命令之线程执行带有参数的任务
线程执行带有参数的任务学习目标能够写出线程执行带有参数的任务1. 线程执行带有参数的任务的介绍前面我们使用线程执行的任务是没有参数的，假如我们使用线程执行的任务带有参数，如何给函数传参呢?Thread类执行任务并给任务传参数有两种方式:args 表示以…...
管理会计报告和财务报告的区别
财务会计报告是给投资人看的，可以反映公司总体的盈利能力。不过，我们回顾一下前面“第一天”里面提到的问题。如果你是公司的产品经理，目前有三个产品在你的管辖范围内。上级给你一笔新的资金，这笔资金应该投到哪个产品上…...
华为OD机试 - 最左侧冗余覆盖子串（Python） | 机试题算法思路 【2023】
最近更新的博客 华为OD机试 - 自动曝光（Python） | 机试题算法思路 【2023】 华为OD机试 - 双十一（Python） | 机试题算法思路 【2023】 华为OD机试 - 删除最少字符（Python） | 机试题算法思路 【2023-02】 华为OD机试 - Excel 单元格数值统计（Python） | 机试题算法思路 …...
【Opencv 系列】第1章 图像基础
通过本套课程,可以学到: 1.opencv的基本操作 2.两个案例,目标追踪&人脸识别 对重点内容,我会提示,包括我再准备这套课程过程中遇到的坑点! 最后代码我会放到git上,章节顺序一致:https://github.com/justinge/opencv_tutorial.git 系列文章目录 第1章 Opencv 图像基础 和 …...
创建和销毁对象——遇到多个构造器参数时要考虑使用构建器
静态工厂和构造器有个共同的局限性：它们都不能很好地扩展到大量的可选参数。比如用一个类表示包装食品外面显示的营养成分标签。这些标签中有几个域是必需的：每份的含量、每罐的含量以及每份的卡路里。还有超过20个的可选域：总脂肪量、饱和脂…...
【c++学习】入门c++（中）
目录一. 前言二. 函数重载1. 概念2.函数名修饰规则三 .引用（&）1. 概念2. 引用特性3.应用1.做参数2. 做返回值3. 传值、传引用效率比较4.引用和指针的区别四 . 结语一. 前言 小伙伴们大家好，今天我们继续学习c入门知识，今天的…...
论文阅读_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…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造，完美适配AGV和无人叉车。同时，集成以太网与语音合成技术，为各类高级系统（如MES、调度系统、库位管理、立库等）提供高效便捷的语音交互体验。 L…...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
ServerTrust 并非唯一
NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...
成都鼎讯硬核科技！雷达目标与干扰模拟器，以卓越性能制胜电磁频谱战
在现代战争中，电磁频谱已成为继陆、海、空、天之后的 “第五维战场”，雷达作为电磁频谱领域的关键装备，其干扰与抗干扰能力的较量，直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器，凭借数字射…...
UR 协作机器人「三剑客」：精密轻量担当（UR7e）、全能协作主力（UR12e）、重型任务专家（UR15）
UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中，UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化…...
Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战
说明：这是一个机器学习实战项目（附带数据代码文档），如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下，风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...
打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用
一、方案背景 在现代生产与生活场景中，如工厂高危作业区、医院手术室、公共场景等，人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式，存在效率低、覆盖面不足、判断主观性强等问题，难以满足对人员打手机行为精…...
python爬虫——气象数据爬取
一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用： 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests：发送 …...
华为OD机试-最短木板长度-二分法(A卷,100分)
此题是一个最大化最小值的典型例题， 因为搜索范围是有界的，上界最大木板长度补充的全部木料长度，下界最小木板长度； 即left0,right10^6; 我们可以设置一个候选值x(mid)，将木板的长度全部都补充到x，如果成功…...
Linux 下 DMA 内存映射浅析
序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存，但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程，可以参考这篇文章，我觉得写的非常…...