Vue面试：
一、Vue指令
1.1Vue中常用的一些指令
v-show和v-if指令的共同点和不同点
为什么避免v-if和v-for一起使用
vue为什么在 HTML 中监听事件？
你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。实际上，使用 v-on 或 @ 有几个好处： 1、因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。 2、当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。
1.2 vue的自定义指令：
1.2.1添加自定义指令的两种方式：
- 全局指令： 通过 Vue.directive() 函数注册一个全局的指令。
- 局部指令：通过组件的 directives 属性，对该组件添加一个局部的指令。
1.2.2你有写过自定义指令吗？自定义指令的应用场景有哪些？
二、Vue原理
2.1 Vue生命周期
2.1.1说说vue的生命周期的理解
1、beforecreate （初始化界面前） vue实例中的el，data，data中的message都为undefined
2、created （初始化界面后） （data和mount初始化成功） el还是undefined，而数据已经与data中的属性进行绑定（放在data中属性当值发生改变的同时，视图也会发生变化），在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
3、beforemount （渲染界面前） 载入前（完成了data和el数据初始化），但是页面中的内容还是vue中的占位符，data中的message信息没有被挂在到Bom节点中，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
4、mounted （渲染界面后） 载入后html已经渲染(ajax请求可以放在这个函数中)，把vue实例中的data里的message挂载到BOM节点中去
5、beforeUpdate （更新数据前）
6、updated （更新数据后）
2.1.2第一次页面加载会触发哪几个钩子？
第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
- 调用 beforeCreate 钩子函数
2.1.3Vue初始化过程中（new Vue(options)）都做了什么？
1、-- 处理自定义事件
2、-- 数据响应式，处理 props、methods、data、computed、watch 等选项
3、-- 调用 created 钩子函数
3、--- 如果发现配置项上有 el 选项，则自动调用 mount 方法，反之，没提供 el 选项则必须调用 $mount
2.2 响应式原理
2.2.1 Vue1.0的响应式原理
2.2.2 Vue2.0的响应式原理。如何对数组进行检测？
响应式原理： 1、数据劫持。 defineProtype。观察者模式。 2、依赖收集 。watcher。 watcherget。 pushtagert。 parsepath。调用getter。dep.depend。 add Watcher。 parsepath。poptargert。watcher.get .watcher。
3、更新。 调用setter。dep.notify。 sub.[i].update。 watcher.update。
数组检测： vue中对数组的原型方法进行了，使用函数劫持的方式，重写了数组的方法。
2.2.3 Vue3.0的响应式原理。 Proxy 与 Object.defineProperty 优劣对比？。Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？
2.2.4 Vue数据双向绑定原理
2.2.5Vue.set 改变数组和对象中的属性。vm.$set(obj, key, val) 做了什么？
2.3 vuediff算法
2.4 虚拟DOM
2.4.1虚拟DOM中key的作用
2.4.2用index作为key可能会引发的问题
2.5 vue异步
2.5.1为什么vue采用异步渲染
2.5.2Vue 的异步更新机制是如何实现的？
2.4.3$nextTick的理解用法：
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
1、Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。 2、Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。 3、然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。 4、所以为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。 使用场景 5、在你更新完数据后，需要及时操作渲染好的 DOM时
2.6、其他属性原理
2.6.1vue中组件的data为什么是一个函数？而new Vue 实例里，data 可以直接是一个对象
Vue的data数据其实是Vue原型上的属性，数据存在于内存当中。Vue为了保证每个实例上的data数据的独立性，规定了必须使用函数，而不是对象。 而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。 vue中data的属性可以和methods中方法同名吗，为什么？
2.6.2Vue中computed与method的区别
2.6.3Vue中watch用法详解
3、组件间通信、插槽 和Vuex
Vue组件通信有哪些方式
vue中的插槽。vue中对mixins的理解和使用
Vuex是什么？怎么使用？什么情况下使用 Vuex？Vuex和单纯的全局对象有什么区别？为什么 Vuex 的 mutation 中不能做异步操作？
4、组件路由Vue-router
router和route的区别 vue-router有几种钩子函数？ vue-router路由跳转方式 vue-router路由传参 keep-alive了解吗
5、vue项目应用：axios。element-ui。 SSR。权限管理。
vue项目开始。 axios 是什么，其特点和常用语法 element-ui中遇到的问题 对SSR有了解吗，它主要解决什么问题？ Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？ Vue项目前端开发环境请求服务器接口跨域问题
6、vue优化
做过哪些Vue的性能优化？SPA首屏加载速度慢的怎么解决？ Vue的优点？ 说说你对SPA单页面的理解，它的优缺点分别是什么？
