Vue面试题

---

一、Vue-Router 有哪几种路由守卫?

路由守卫为：
全局守卫：beforeEach
后置守卫：afterEach
全局解析守卫：beforeResolve
路由独享守卫：beforeEnter

二、vue中常用的UI组件库

常用的UI组件库有：
Element：饿了么组件库，适用于开发应用后台
Vant：vue的移动端组件库
Antd: Ant Design vue是阿里组件库，适用于开发应用后台
vux： Vue.js 移动端 UI 组件库
Amaze ~ 妹子 UI
mint-ui：移动端 UI 组件库

三、vue中子组件调用父组件的方法

通过v-on 监听 和e m i t 触发来实现： 1 、在父组件中通过 v − o n 监听当前实例上的自定义事件。 2 、在子组件中通 过 ′ emit触发来实现： 1、在父组件中 通过v-on 监听 当前实例上的 自定义事件。 2、在子组件 中 通过’emit触发来实现：1、在父组件中通过v−on监听当前实例上的自定义事件。2、在子组件中通过 “emit”触发 当前实例上的 自定义事件。

四、v-show 和 v-if 指令的共同点和不同点?

1）相同点：
v-show 和 v-if 都能控制元素的显示和隐藏。
2）不同点：
实现本质方法不同
v-show 本质就是通过设置 css 中的 display 设置为 none，控制隐藏
v-if 是动态的向 DOM 树内添加或者删除 DOM 元素
3）编译的区别
v-show 其实就是在控制 css
v-if 切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部
的事件监听和子组件
4）编译的条件
v-show 都会编译，初始值为 false，只是将 display 设为 none，但它也编译了
v-if 初始值为 false，就不会编译了
5）性能比较
v-show 只编译一次，后面其实就是控制 css，而 v-if 不停的销毁和创建，
故 v-show 性能更好一点。注意点：因为 v-show 实际是操作 display:" "或者 none，当 css 本身有 display：none 时，v-show 无法让显示总结（适用场景）：如果要频繁切换某节点时，使用 v-show（无论 true 或者 false初始都会进行渲染，此后通过 css 来控制显示隐藏，因此切换开销比较小，初始开销较大），如果不需要频繁切换某节点时，使用 v-if（因为懒加载，初始为 false时，不会渲染，但是因为它是通过添加和删除 dom 元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大）

五、什么是vue.js中的自定义指令？

自定义一些指令对底层DOM进行操作。
Vue里面有许多内置的指令，比如v-if和v-show，这些丰富的指令能满足我们的绝大部分业务需求，不过在需要一些特殊功能时，我们仍然希望对DOM进行底层的操作，这时就要用到自定义指令。