vue面试总结

通信方式

props/$emit：父子通信
$emit/ $on：这种方法通过一个空的Vue实例作为中央事件总线（事件中心），用它来触发事件和监听事件,巧妙而轻量地实现了任何组件间的通信，包括父子、兄弟、跨级。
vuex：状态管理
$attrs/ $listeners：跨级通信。

Vuex

生命周期

1.beforeCreate(){}在执行的时候，data还有methods都没有被初始化
2.created(){} data还有methods都被初始化好了，如果要调用methods方法或者操作data里面的数据，最早只能在created里面进行操作。
3.beforeMount(){} 表示模板已经在内存中编辑完成了，但是尚未渲染到模板页面中。即页面中的元素，没有被真正的替换过来，只是之前写的一些模板字符串。
4.mounted(){} 表示内存中模板已经真实的挂载到页面中去了，用户可以看到渲染好的界面了
注意这是一个生命周期函数的最后一个函数了，执行完这个函数表示 整个vue实例已经初始化完成了，组件脱离了创建阶段，进入运行阶段。
下面是运行期间的两个生命周期函数的钩子：
5.beforeUpdate(){} 表示我们的界面还没更新 但是data里面的数据是最新的。即页面尚未和最新的data里面的数据包吃同步。
6.update(){} 表示页面和data里面的数据已经包吃同步了 都是最新的。
7.beforeDestory(){} 当执行这个生命周期钩子的时候 vue的实例从运行阶段进入销毁阶段 此时实例身上的data 还有 methods处于可用的状态。
8.Destoryed(){} 表示组件已经完全被销毁了 组件中所有的实例方法都是不能用了

父子组件生命周期顺序

加载渲染过程
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount- >子mounted->父mounted
子组件更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated
父组件更新过程
父beforeUpdate->父updated
销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
原文链接：https://blog.csdn.net/qq_42072086/article/details/108385632

数据代理原理

给vm重写data中的属性，并添加getter和setter，当vm.aProperty变化时，更新vm.data.aProperty。

模板解析原理

大括号表达式和一般指令：模板解析中会寻找大括号表达式和一般指令，并在data中寻找对应属性，然后进行替换。
事件指令：找到v-on属性，并在methods中寻找对应方法，并绑定。

深度绑定

deep：true

Computed和Watch区别

computed是计算属性，会根据data中的数据进行计算并缓存该结果。watch会给属性设置getter和setter。当一个数据依赖多个数据时，适合用computed，当多个数据依赖一个数据时，适合用watcher。

keep-alive是什么，作用，相关生命周期

组件在跳转时保持当前组件状态。初次进入时会触发create、mount、activated，退出时触发deactivated，再次进入指触发activated。

v-model的原理

v-model完成数据双向绑定，其实本质是一个语法糖，原理是v-on绑定事件和v-bind绑定属性

v-for和v-if为什么不能同时使用

v-for的优先级比v-if高，所以每个元素都会执行v-if，所以效率会降低。解决办法：父级元素v-if。

v-for中key作用

给每个元素设置一个唯一标识，这样能提高diff算法的效率。

v-if和v-show区别

v-if会直接在dom中直接删除或增加该元素，v-show会更改该元素的display属性。

Vue响应式原理

本质：通过Object.defineProperty来给data中的属性设置setter和getter，来追踪data中属性的变化。每个组件实例都有一个watcher，它会记录所有跟该组件接触过的property，当property变化时，触发，setter，watcher检测到该变化，然后更新组件视图。问题是：不能检测数组和对象的变化。规避方法：对于对象：添加data中的属性时，使用vm.set方法，或通过assign方法，将原来的所有属性和新的属性一起，创建一个新的对象。对于数组：使用set或者数组API（因为Vue重写了API）

nextTick原理

nextTick返回一个Promise对象，所以会把更新dom操作放入事件队列，等待当前同步事件完成后执行。

虚拟dom和diff算法

虚拟dom：用一个object模拟dom树，更新时会先更新虚拟dom，然后通过render函数渲染。diff算法：对比新旧虚拟dom树，同级比较。

scoped作用和原理

css只在当前组件有效。原理：添加唯一class。

vue常用修饰符

.stop：停止冒泡
.prevent：阻止默认事件