Vue面试题相关知识点整理（2）- v-if 与 v-show相关、v-for相关、常见的Vue内置指令

整理了一部分最近看的Vue面试相关知识点

目录

一、v-if 与 v-show相关

1.1 v-if 与 v-show的区别

1.2 v-show指令是否算重排

二、v-for相关

2.1 v-if 与 v-for 为什么不建议一起使用

2.2 v-for中key的作用

2.3 为什么v-for中key的不推荐使用随机数或index

2.4 v-for遍历对象时，是按什么顺序遍历的？如何保证顺序？

三、常见的Vue内置指令

---

一、v-if 与 v-show相关

1.1 v-if 与 v-show的区别

• v-if：是真正的条件渲染，因为它会确保在切换过程中条件块内的监听器和子组件适当地销毁和重建；且v-if 是惰性的，只要条件渲染为假时，就是什么也不做，直到条件为真时，才会渲染条件块
• v-show：首先 v-show 总是会先渲染条件块的，之后只是基于css中的display属性来控制条件块的显示/隐藏

因此 v-if 适用于不会频繁切换条件的场景；v-show适用于需频繁切换条件的场景

1.2 v-show指令是否算重排

v-show指令算是重排的。因为v-show本质是基于css中的display属性来控制条件块的显示/隐藏；而重排的定义是 渲染树中的节点信息发生大小、距离等改变，需重新计算各个节点和css具体的大小和位置。当display属性控制条件块显示/隐藏时，会改变节点的大小和渲染树的布局，从而导致重排。

---

二、v-for相关

2.1 v-if 与 v-for 为什么不建议一起使用

因为 v-if 与 v-for 之间是有优先级的。v-for 的优先级高于 v-if。这主要在vue源码中有体现，在vue.js 中的 genElement方法中里的 if - else if 判断，可以看出v-for执行的优先级高于v-if。（例如：beforeCreate 与 created 生命周期钩子，它们的优先级在源码中已经是设定好的了，先执行beforeCreate 再执行 create）

2.2 v-for中key的作用

key的作用：可以使vue的diff操作更加准确、快速

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是没有问题的
————————————————

Vue知识点整理（一）- Vue核心（4）- 列表渲染 - 1.3 key作用与原理（重要）

2.3 为什么v-for中key的不推荐使用随机数或index

因为在插入数据或者删除数据时，会导致后面数据的key绑定的index发生变化，进而导致重新渲染，效率会降低，同时也会导致渲染出错；当数据进行更改时，会通过key来判断虚拟DOM树是否进行了更改。如果发现了相同的dom-key就可以直接复用，减少渲染消耗。所以使用随机数或index作为key，会导致性能的浪费，并且使用index作为key可能导致渲染出错。

渲染出错的情况，例如：用v-for遍历list列表且以index作为key，其中list列表有item1、item2、item3，且都在checkbox表单控制元素上创建了双向的数据绑定，其中item2在勾选了checkbox。如果我们这时候删除了item1，就会导致item2， item3的key值绑定的index发生变化，使得checkbox勾选的变为了item3

2.4 v-for遍历对象时，是按什么顺序遍历的？如何保证顺序？

1. 会先判读是否有iterator接口，如果有循环执行iterator.next() 方法
2. 没有iterator的情况下，会调用Object.key()方法，在不同浏览器中，JS引擎不能保证输出顺序一致
3. 保证对象的输出顺序，可以把对象放在数组中，作为数组元素

问题来源于GitHub，地址：[vue] vue使用v-for遍历对象时，是按什么顺序遍历的？如何保证顺序？ · Issue #463 · haizlin/fe-interview · GitHub

---

三、常见的Vue内置指令

1. v-on（@）：用于监听DOM事件。例如：v-on:click、v-on:keyup
2. v-bind（:）：响应并更新DOM特性；主要用法：绑定属性，动态更新HTML元素上的属性
3. v-model：数据双向绑定，用来在input、select、checkbox、radio等表单控制元素上创建双向的数据绑定
4. v-show：条件渲染，基于css中的display属性控制条件块的 显示/隐藏
5. v-if / v-else / v-else-if：条件渲染，控制条件块销毁和组建
6. v-for：循环指令，注意：v-for优先级高于v-if，且key值不推荐使用随机数或index
7. v-text：向其所在的节点中渲染文本内容，注意：v-test会替换掉节点中原本的内容
8. v-html：向指定节点中渲染可包含html解构的内容，注意：v-html会替换掉节点中原本的内容
9. v-cloak：本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。一般配合css中display属性来解决因网速慢时页面展示出{{xxx}}的问题
10. v-once：v-once所在的节点在初次渲染后，就视为静态内容了。后续数据的改变不会引起    v-once所在的节点结构更新，可用于优化性能
11. v-pre：跳过其所在节点的编译过程；可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译