1、生命周期钩子是如何实现的?

生命周期	描述
beforeCreate	vue实例初始化后，数据观测（data observer）和事件配置之前。data、computed、watch、methods都无法访问。
created	vue实例创建完成后立即调用 ，可访问 data、computed、watch、methods。未挂载 DOM，不能访问el、ref。
beforeMount	在 DOM 挂载开始之前调用。
mounted	vue实例被挂载到 DOM。
beforeUpdate	数据更新之前调用，发生在虚拟 DOM 打补丁之前。
updated	数据更新之后调用。
beforeDestroy	实例销毁前调用。
destroyed	实例销毁后调用 。

2、Vue 中组件的 data 为什么是一个函数?

一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝

3、nextTick 在哪里使用?原理是?

根据浏览器的不同所所以兼容的API也不一样，兼容顺序

Promise
MutationObserver
setImmediate
setTimeout

4、Vue 组件间通讯方式

prop、emit、eventbus、.sync、 $attrs $isteners、ref、插槽、vuex

5、Vue动态组件 is

<component:is="componentId"></component>

6、父子组件的生命周期（执行顺序）完整的父子组件生命周期：

7、v-if 和 v-show 的区别

v-if:如果为 false 默认不渲染 切换时会进行创建和销毁 会触发生命周期钩子 v-show:默认渲染 css 切换

8、v-if 与 v-for 的优先级

vue2 v-for 优先级高 vue3 v-if 优先级高

9、Vue常用的修饰符

stop：阻止冒泡 prevent：阻止默认行为 self：仅绑定元素自身触发 once：只触发一次

10、Vue 如何检测数组变化?

● 初始化 instance ->_init->initState->initData->observe->new Observer(value)
● 在构造函数里区分是否是Array
● 给Array重写变异方法
○ push
○ pop
○ shift
○ unshift
○ splice
○ sort
○ reverse

11、vue.set 方法是如何实现的?

set 方法内部实现方式： ob.dep.notify() ob 通过Observe 给__ob__赋值 dep在get里赋值 notice 会调用 watcher的update 方法

12、Vue.mixin 的使用场景和原理

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项

• 同名数据对象：对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先
• 同名钩子函数：将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用
methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对

13、vue-router 两种模式的区别?

• hash 模式
  背后的原理是 onhashchange 事件,可以在 window 对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = hash; }
• history 模式
  因为 HTML5 标准发布，多了两个 API，pushState() 和 replaceState()。 通过这两个 API （1）可以改变 url 地址且不会发送请求， （2）不仅可以读取历史记录栈，还可以对浏览器历史记录栈进行修改。 除此之外，还有 popState().当浏览器跳转到新的状态时，将触发 popState 事件. 修改历史状态 包括了 pushState,replaceState 两个方法,这两个方法接收三个参数:stateObj,title,url window.history.pushState(stateObject, title, URL) window.history.replaceState(stateObject, title, URL)

14、Vuex 的 Mutation 和 Action 的区别吗？

定位不同 Mutation：专注于修改 State，理论上是修改 State 的唯一途径。 Action：业务代码、异步请求。 角色不同，二者有不同的限制 Mutation：必须同步执行。 Action：可以异步，但不能直接操作 State

15、为什么 vue 或者 react 要求 key 值唯一

没有 Key 值的问题 老集合中包含节点：A、B、C、D，更新后的新集合中包含节点：B、A、D、C，此时新老集合进行 diff 差异化对比，发现 B != A，则创建并插入 B 至新集合，删除老集合 A；以此类推，创建并插入 A、D 和 C，删除 B、C 和 D。 因为这些都是相同的节点，但由于位置发生变化，导致需要进行繁杂低效的删除、创建操作，其实只要对这些节点进行位置移动即可。 针对这一现象，提出优化策略：允许开发者对同一层级的同组子节点，添加唯一 key 进行区分，虽然只是小小的改动，性能上却发生了翻天覆地的变化！

16、Vue @hook 在父组件监听子组件的生命周期方法

<Child  
@hook:mounted="handleChildMounted" 
@hook:beforeDestroy="handlebeforDestryed" 
@hook:destroyed="handleDestroyed" :data="data" />

17、vue.use和vue.prototype.$xxx的区别

Vue.prototype就是js函数原型对象的特性， 函数原型上的属性/方法, 在函数实例化后, 可以在任意实例上读取
Vue.prototype适合于注册Vue生态外的插件，Vue.use适合于注册Vue生态内的插件
每一个vue组件都是Vue的实例，所以组件内this可以拿到Vue.prototype上添加的属性和方法
Vue.use主要是执行install方法，而install主要也是执行Vue.prototype方法

18、$attrs和$listeners 的使用

• attrs属性就包含了所有父组件传来的数据(除开已经props声明了的)
  当父组件传递了很多数据给子组件时，子组件没有声明props来进行接收，那么子组件中的attrs属性就包含了所有父组件传来的数据(除开已经props声明了的)，子组件还可以使用v−bind="attrs属性就包含了所有父组件传来的数据(除开已经props声明了的)，子组件还可以使用v-bind="attrs属性就包含了所有父组件传来的数据(除开已经props声明了的)，子组件还可以使用v−bind="attrs"的形式向它的子组件（孙子组件）传递数据，孙子组件使用$attrs的方式和它的父组件原理类似。
• listeners属性和attrs属性类似，只是它们传递的东西不一样
  $listeners可以通过v-on的形式再次传递给下层组件，当父组件在子组件上定义了一些自定义的非原生事件时，在子组件内部可以通过listeners属性获取>父组件的自定义事件，它和attrs的区别很明显，attrs用来传递属性。使用listeners的好处在于：如果存在多层级组件，无需使用emit的方式逐级向上触发事件，只需要使用$listerners就可以得到父组件中的自定义事件，相当于偷懒了。
• inheritAttrs
  父组件传递了很多数据给子组件，子组件的props没有完全接收，那么父组件传递的这些数据就会渲染到HTML上，我们可以给子组件设置inheritAttrs 为false，避免这样渲染。

data() {return {childStr: 'child String'};
},inheritAttrs: false,

总结

• attrs:用来会传递属性，除了class、style之类的，它是一个对象。
• listeners：用来传递事件，除了原生事件，它也是一个对象。
• attrs和listeners这两个属性可以解决多层组件之间数据和事件传递的问题。
• inheritAttrs解决未使用props接收的数据的属性渲染