前端面试题(vue)

一、请说出Vue几种常用的指令

1. v-if : 根据表达的值的真假条件渲染元素。在切换时元素及它的数据绑定组件被销毁并重建
2. v-show : 根据表达式之真假值，切换元素的 display CSS属性
3. v-for: 循环指令，基于一个数组或者对象渲染一个列表，vue2.0以上必须需配合key值 使用
4. v-bind ：动态地绑定一个或多个特性，或一个组件prop到表达式
5. v-on ：用于监听指定元素的DOM时间，比如点击事件，绑定事件监听器
6. v-model ：实现表单输入和应用状态之间的双向绑定
7. v-pre: 跳过这个元素和他的子元素的编译过程 可以用来显示原始Mustache标签。跳过大量没有指令的节点会加快编译
8. v-once ：只渲染元素和组件一次。 随后的重新渲染， 元素或组件及其所有的子节点将视为静态内容并跳过。这可以用于优化更新性能。 二、请问v-if 和 v-show 有什么区别

共同点： v-if 和 v-show都是动态显示DOM元素
不同点

1. 编译过程：v-if 是真正的条件渲染，因为他会确保在切换过程中条件块内的事件监听器和子组件适当地销毁和重建。
   v-show 的元素始终会被渲染并保留在DOM中，v-show 只是简单的切换元素的CSS属性display
2. 编译条件：v-if是惰性的：如果在初始渲染时条件为假，则什么都不做。知道条件的第一次为真是，才会开始渲染条件块。
   v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。
3. 性能消耗：v-if有更高的切换消耗。
   v-show有更高的初始消耗
4. 应用场景：v-if适合运行时条件很少改变时使用
   v-show 适合频繁切换
   三、Vue常用的修饰符
5. .stop - 调用event.stopPropagation(),禁止时间冒泡。
6. .prevent - 调用event.preventDefault(),阻住事件默认行为。
7. .capture - 添加事件监听器时使用capture模式。
8. .self - 只当事件是从监听器绑定的元素本身触发时才触发的回调
9. .{keyCode|keyAlias} - 只当事件是从特定键触发时才触发回调
10. .once 只触发一次回调
11. .native - 监听组件根元素的原生事件
12. 如果是在自己封装的组件或者是使用一些第三方的UI库时，会发现并不起效果，这时就需要用.native修饰词了，如:
    ``
    //使用案例：
    <el-input
    v-model=“inputName”
    placeholder=“搜索你的文件”
    @keyup.enter.native=“searchFile(params)”

``

四、vue 中 key 值的作用

1. key值：用于管理可复用的元素。因为vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头渲染，这么做是vue变得非常快，但是这样也不总是符合实际要求
2. 2.2.0+的版本中，当在组件中使用v-for时，key现在是必须的

五、$nextTick的使用

1. 什么是$nextTick？因为vue的异步更新队列，$nextTick是用来知道什么时候更新DOM更新完成的
   六 、 vue 中 keep-alive 组件的使用
2. 主要用于保留组件状态或避免重新渲染