2021Vue面试题总结（2）

废话不多说，这几天我也是来回奔波各大厂进行面试，索性将下面的面试题总结一下分享出来。

一、vue生命周期的相关面试题

首先来看一下周期图

总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/后。

创建前/后： 在beforeCreate阶段，由于还未初始化，vue实例的挂载元素el和数据对象data都为undefined；在created阶段，vue实例的数据对象data有了，el还没有。 

载入前/后：在beforeMount阶段，vue实例的$el和data都初始化了，但挂载之前还是为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。 

更新前/后：当data变化时，会触发beforeUpdate和updated方法。

销毁前/后：在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。 

（1）什么是vue生命周期? Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。 

（2）vue生命周期的作用是什么? Vue生命周期中有多个事件钩子，让我们在控制整个Vue实例过程时更容易形成好的逻辑。 

（3）vue生命周期总共有几个阶段? 可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/后。 

（4）第一次页面加载会触发哪几个钩子? 第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子 

（5）DOM 渲染在 哪个周期中就已经完成? DOM 渲染在 mounted 中就已经完成了。 

（6）简单描述每个周期具体适合哪些场景? 生命周期钩子的一些使用方法： beforecreate : 可以在此阶段加loading事件，在加载实例时触发； created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用； mounted : 挂载元素，获取到DOM节点； updated : 如果对数据统一处理，在这里写上相应函数； beforeDestroy : 可以做一个确认停止事件的确认框； nextTick : 更新数据后立即操作dom；

二、mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适用？ 

mvc和mvvm其实区别并不大，都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。 区别：vue数据驱动，通过数据来显示视图层而不是节点操作。 场景：数据操作比较多、频繁的场景，更加便捷。 

三、vue的优点是什么？

低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。 

可重用性：可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。 

独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。 可测试。界面素来是比较难于测试的，而现在测试可以针对ViewModel来写。 

四、 组件之间的传值？

父组件通过标签上:data=data方式定义传值 

子组件通过props方法接受数据 

子组件通过$emit方法传递参数