Vue的列表之渲染,排序,过滤详解

1. 列表（渲染、排序、过滤）

1.1 条件渲染指令

有个小技巧：

​ 如果是查找对象中不存在的属性，返回的是一个undefined，利用这一个点不管是v-show或者是v-if，如果值等于undefined的就不显示，假设sex属性不存在

<p v-show="student.sex">性别：{{student.sex}}</p>

1.1.1 v-show

1.v-show的原理：通过display：none 对元素进行隐藏，当满足条件时去除display：none这个样式

2.适用的场景是：切换频率较高的场景

3.在使用v-show隐藏元素的时候是可以获取得到元素的，而v-if 是无法获取到元素的

1.1.2 v-if

1.v-if的原理：将整个节点移除，满足条件时添加节点

2.v-else、v-else-if 需要配合v-if去使用，但是结构不能被破坏

必须要先写v-if，例如：

适用的场景：切换频率比较低的场景

template

最大的特点就是不破坏结构但是只能与 v-if 进行配合使用

1.1.3 v-if和v-show的小案例

1.1.4 v-for（key的原理）

特点：

1.可以遍历数组

2.可以遍历对象

3.可以遍历字符串

4.可以遍历次数（用的很少）

5.如果我们不写key，默认使用index

作用：用于展示列表的数据

语法：v-for = "(item,index) in xxx" :key= "yyy"

key的原理：（很重要）

1.虚拟dom中key的作用：

key是虚拟dom对象的标识，当数据发生变化时，vue会根据【新数据】生成【新的虚拟dom】, 随后vue进行【新虚拟dom】与【旧虚拟dom】的差异比较，比较规则如下：

(1). 旧虚拟dom中找到了与新虚拟dom相同的key：

①若虚拟dom中内容没变, 直接使用之前的真实dom

②若虚拟dom中内容变了, 则生成新的真实dom，随后替换掉页面中之前的真实dom

(2). 旧虚拟dom中未找到与新虚拟dom相同的key直接创建新的真实dom，随后渲染到到页面。

2.如果使用index作为key会引发以下的问题：

（1）如果发生逆序添加、逆序删除破坏了顺序操作就会产生没有必要的dom更新而会造成达不到效果的问题

（2）如果输入结构包括了输入类的dom元素，会产生更新问题比如：input的框的数据对不上等等

3.所以在开发的过程中key的使用最好是使用唯一能够标识的值作为key，比如id，date.now(),nanoid这个包npm i nanoid等等

1.2 列表过滤

使用computed

使用watch

1.3 列表排序

总结

以上就是今天要讲的内容，本文介绍了和列表（渲染、排序、过滤）相关的知识，希望对大家有所帮助！