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…...
后进先出（LIFO）详解
LIFO 是 Last In, First Out 的缩写，中文译为后进先出。这是一种数据结构的工作原则，类似于一摞盘子或一叠书本： 最后放进去的元素最先出来 -想象往筒状容器里放盘子： （1）你放进的最后一个盘子（…...
论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（二）
HoST框架核心实现方法详解 - 论文深度解读（第二部分） 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章： 论文深度解读 + 算法与代码分析（二） 作者机构： 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题： 人形机器人…...
Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢，博主的学习进度也是步入了Java Mybatis 框架，目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学，希望能对大家有所帮助，也特别欢迎大家指点不足之处，小生很乐意接受正确的建议&…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 （部分有免费额度&#x…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法：使用 MyBatis 的 <foreach> 标签和批处理模式（ExecutorType.BATCH）。 方法一：使用 XML 的 <foreach> 标签ÿ…...
腾讯云V3签名
想要接入腾讯云的Api，必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口，但总是卡在签名这一步，最后放弃选择SDK，这次终于自己代码实现。 可能腾讯云翻新了接口文档，现在阅读起来，清晰了很多&…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上，对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...
 Module Federation：Webpack.config.js文件中每个属性的含义解释)
MFE(微前端) Module Federation：Webpack.config.js文件中每个属性的含义解释
以Module Federation 插件详为例，Webpack.config.js它可能的配置和含义如下： 前言 Module Federation 的Webpack.config.js核心配置包括： name filename（定义应用标识） remotes（引用远程模块࿰…...
Vue3中的computer和watch
computed的写法 在页面中 <div>{{ calcNumber }}</div>script中 写法1 常用 import { computed, ref } from vue; let price ref(100);const priceAdd () > { //函数方法 price 1price.value ; }//计算属性 let calcNumber computed(() > {return ${p…...
Java 与 MySQL 性能优化：MySQL 慢 SQL 诊断与分析方法详解
文章目录 一、开启慢查询日志，定位耗时SQL1.1 查看慢查询日志是否开启1.2 临时开启慢查询日志1.3 永久开启慢查询日志1.4 分析慢查询日志 二、使用EXPLAIN分析SQL执行计划2.1 EXPLAIN的基本使用2.2 EXPLAIN分析案例2.3 根据EXPLAIN结果优化SQL 三、使用SHOW PROFILE…...