vue 面试题总结

1. vue 的优缺点：

优点

1. 模板式的语法，简单易学，容易上手；
2. 虚拟 DOM 保证了在操作 dom 的形式下，性能的下限。

缺点：

1. 模板式的语法不够灵活；
2. 缺乏高阶教程与文档；

2. vue 组件的传值方式？

1. props 与 $emit 的实现 父子 组件的传值；
2. event bus，将父级作为桥梁，实现同级组件传值；
3. provide/inject 实现深度嵌套组件之间的传值，顶级定义的数据，任何一层的子级都可以访问，虽然官方不推荐使用，但是用好了，能带来意想不到的好处；
4. vuex 状态管理工具，能实现任意传。

3. 为什么使用 key ?

使用 key 来给每个节点做一个唯一标识，在 Diff 算法就可以正确的识别此节点。作用主要是为了高效的更新虚拟 DOM。

4. v-show 和 v-if 指令的区别？

• 共同点： 都能控制元素的显示和隐藏；

• 不同： 实现本质方法不同，v-show 是通过 css 的 display 属性来控制隐藏；v-if 是动态的向 DOM 树内添加或者删除 DOM 元素。

• 性能上比较：

  • v-show 不管是设置为 true 还是 false，都会加载，而且只会加载一次，对于一些需要频繁切换的，建议使用 v-show，总结就是： 切换开销比较小，初始开销较大;
  • v-if 如果设置为 false，则它就不会编译，这样对于一些不会频繁切换的场景，建议是用 v-if，总结就是： 初始渲染开销较小，切换开销比较大。

5. v-if 和 v-for 的优先级:

如果两者存在同一个标签上时， v-for 的优先级高于 v-if，但是一般不推荐写在一个标签上，造成性能浪费。

<template v-if="isTrue">
  <p v-for="item in arr">{
  { item }}</p>
</template>

6. v-modal 的使用

v-model 本质上就是一个语法糖， 本质是， 父组件将 key 为 value 的属性传递给子组件， 子组件默认使用名为 input 的事件，将新值传递给父组件；

vue3 重构了该指令，形式为 v-mode:msg="" ，子组件事件名为 update:msg ，让 v-model 可以绑定在任何组件上，而不仅仅是表单。

7. v-on 可以监听多个方法吗？

可以。

<input type="text" v-on="{ input:onInput,focus:onFocus,blur:onBlur, }" />

8. slot

组件的插槽，在组件内部定义好位置，但是不设置内容，内容由用户手动传递；

1. 匿名插槽：

<!-- 组件名 submit-button -->
<button type="submit">
  <slot></slot>

  <!-- 可以设置默认值，如果调用时不传值，则使用该默认值 -->
  <slot>submit</slot>
</button>

使用
<submit-button> Save </submit-button>

2. 具名插槽：使用语法为 v-slot:name

base-layou
<div class="container">
  <header