每天10个vue面试题(二)

1. 过滤器是什么，有什么作用？

• 过滤器是用来过滤数据的
• 在Vue中使用filters来过滤数据，filters不会修改数据，而是过滤数据，改变用户看到的输出（计算属性 computed ，方法 methods 都是通过修改数据来处理数据格式的输出显示）

---

2. 如何写一个过滤器？

• 过滤器是一个函数，它会把表达式中的值始终当作函数的第一个参数。
• 过滤器用在插值表达式 {{ }} 和 v-bind 表达式 中，然后放在操作符“ | ”后面进行指示。

---

3. 常见的事件修饰符及作用？

• .stop：等同于 JavaScript 中的 event.stopPropagation() ，防止事件冒泡；
• .prevent ：等同于 JavaScript 中的 event.preventDefault() ，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；
• .capture ：与事件冒泡的方向相反，事件捕获由外到内；
• .self ：只会触发自己范围内的事件，不包含子元素；
• .once ：只会触发一次

---

4. v-if、v-show、v-html 的原理？

• v-if会调用addIfCondition方法，生成vnode的时候会忽略对应节点，render的时候就不会渲染；
• v-show会生成vnode，render的时候也会渲染成真实节点，只是在render过程中会在节点的属性中修改show属性值，也就是常说的display； 
• v-html会先移除节点下的所有节点，调用html方法，通过addProp添加innerHTML属性，归根结底还是设置innerHTML为v-html的值。

---

5. v-if和v-show的区别？

• 手段：v-if是动态的向DOM树内添加或者删除DOM元素；v-show是通过设置DOM元素的display样式属性控制显隐；
• 编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；
• 编译条件：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下，无论首次条件是否为真，都被编译，然后被缓存，而且DOM元素保留；
• 性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；
• 使用场景：v-if适合运营条件不大可能改变；v-show适合频繁切换

---

6. v-model是什么？

• v-model 是 vue 中进行数据双向绑定的指令，在内部实际上是通过语法糖来完成数据的双向绑定
• v-model 绑定的形式有两种，一种是绑定在普通表单元素上，一种是绑定在自定义组件上，两者在实现上也略微不同；
• 绑定在普通表单元素上，分别有 input select textarea radio 等，从源码中也可以看出，他们之间的实现也略微不同，区别在于改变值时触发的事件不同；

---

7. v-model 是如何实现的，语法糖实际是什么？

• 当 v-model 绑定在普通表单元素 select、checkbox、radio 时，语法糖为 v-bind:value 和 v-on:change；
• 当 v-model 绑定在自定义组件时，语法糖为 v-bind:value 和 v-on:input 或者自定义 model 选项；
• 当 v-model 绑定在 input、textarea时，语法糖分几种情况：

1. 默认为 input 事件；
2. 带 lazy 修饰符时为 change 事件；
3. 带 type="range" 属性时为 __r；
4. 带 trim或 number 时新增 blur 事件；

---

8. data为什么是一个函数而不是对象？

•     Vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的；
• 采用函数形式定义，在initData时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。
• 而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。

---

9. 对keep-alive的理解？

• 如果需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。
• keep-alive有以下三个属性：

1. include 字符串或正则表达式，只有名称匹配的组件会被匹配；
2. exclude 字符串或正则表达式，任何名称匹配的组件都不会被缓存；
3. max 数字，最多可以缓存多少组件实例。

---

10. keep-alive 实现原理？

• 判断组件 name ，不在 include 或者在 exclude 中，直接返回 vnode，说明该组件不被缓存。
• 获取组件实例 key ，如果有获取实例的 key，否则重新生成。
• key生成规则，cid +"∶∶"+ tag ，仅靠cid是不够的，因为相同的构造函数可以注册为不同的本地组件。
• 如果缓存对象存在，则直接从缓存对象中获取组件实例给 vnode ，不存在则添加到缓存对象中。
• 最大缓存数量，当缓存组件数量超过 max 值时，清除 keys 数组内第一个组件。