vue的条件渲染和列表渲染（2022-4-21学习笔记）

条件渲染

控制元素的显示与隐藏

v-show

底层实现就是控制元素的display，不去动DOM树，只控制样式

v-if

确定不显示，元素结构将不见，适用于切换元素比较低的场景

v-else-if

与v-if的结构需要紧紧挨在一起，v-if必须是一开始使用的

v-else

同v-else-if，后面不需要再添加条件啦！

template

只能配合v-if使用，不破坏原本的结构。

总结

列表渲染

v-for

很重要的key。

每一个结构拥有唯一的标识。在react中直接报错。

v-for="(item,index) in list"  :key-"index"
//不加的话在老的脚手架中容易报错

可以遍历数组、对象、字符串等。

总结

key******

【重要，面试中喜欢问】

key给每个节点一个标识，就像人类社会的身份证号码一样。每个数据的id不由我们维护，在服务器中生成。
key是vue内部使用的，所以生成真实的DOM树的时候，不会再显示。没有加上key的时候，代码运行的效率更低。我们也不使用index作为key，比如在遍历数组的时候，我们在数组的最前面加入一个对象的话，就会出现错误。我们使用key.id作为数据的唯一标识。

对比算法依赖key。对比虚拟DOM的内容结构，对比之后不一致，也就是不能复用，所以我们只能使用新的虚拟DOM，生成全新的真实DOM。对比之后发现一致，我们曾经使用旧的虚拟DOM转化成了真实DOM，所以我们直接复用之前生成的真实DOM。但是在此之前我们在真实的DOM树中输入了内容，所以就会出现页面的内容混乱。

如果我们使用index做索引值，在我们打乱数据的顺序以后，页面显示的DOM就会发生错乱。而且我们原有的DOM很多也没有复用，而是重新生成。

我们使用唯一的id作为key。旧有的生成的真实的DOM树只需要复用，只需要生成新增的元素的真实DOM树。
如果我们在使用v-for列表的时候，没有添加key，vue就会默认将数据的index值作为这一唯一标识。
------------------【总结】---------------------

有唯一标识的话，我们尽量使用唯一标识，如果只是用作展示数据的话，我们用index也是没有问题。但是合格的后端给我们的数据都是应该有唯一标识的！！！

---

列表过滤

模糊搜索

第一步，获取用户输入。第二步，过滤用户输入。

监听属性

使用watch来对输入框的输入的内容进行监听。filter不会改变原数组，会返回一个全新的数组。
【注意】每个字符串中都是包含空字符的，位置索引是0。

新数组显示为空，最开始我们希望它显示跟完整数组一样的话，监听属性就要在一开始渲染的时候执行一次。

计算属性

使用computed来对输入框的输入的内容进行监听。

一开始渲染的时候，计算属性就会执行，两种方法都能实现的时候，我们优先使用计算属性。

---

vscode小技巧
开始折叠：

折叠结束：

---

vue监测数据改变的原理

我们的数据在data中传到vm中的话，首先会进行一些加工，使得每一个数据都能匹配一个get和set，使得数据修改的时候能够变成响应式的。

尝试写get和set，就会进入一个递归，变成死循环。
get和set的基本原理：


以上只考虑了一层数据。

vue.set

追加数据可以实现响应式的。
vue.set的局限：不能够给data追加一个属性！

数组

没有为数组服务的get和set。

希望修改数组的原始方法，能够修改整个原数组。vue能够监视这样的变化。

直接操作数组的索引值进行修改，是不生效的。

自己的数组调用的方法是数组原型上面的方法。首先调用数组的原型方法，第二就是重新解析模板。
vue.set也可以使用在数组身上。

示例方法：

总结