前端面试之 Vue的生命周期以及对MVVM的理解？

最好是理解背后的原理，这样面试的时候才能侃侃而谈，大家一起加油吧~查漏补缺的同时，不光是去背诵，而是去用我们自己的项目，自己做的小demo是去理解这些概念。

一、对MVVM的理解

MVVM,是Model-View-ViewModel的缩写
其实就是拆分view viewmodel 和model三个部分

上图中，左侧的view指的就是我们的页面视图，而model指的就是页面中的数据，比如一个对象的信息

{
	name:'小明',
	age:17 
}

而中间的监控者就是我们的ViewModel,负责监控两侧的数据，简单理解就是个同步View和Model的对象，连接Model和View。

在MVVM架构之下，View和Model之间并没有直接的联系，而是用过ViewModel进行交互。Model和ViewModel之间的交互时双向的，因此View数据会同步到Model中，而Model数据也会立即反应到View当中。
ViewModel 通过双向数据绑定把View层和Model层链接起来，而View和Model全是自动的，无需人为之间的干涉，因此开发者只需要关注业务逻辑，不需要自己再手动地操作dom，不需要关注数据状态的同步问题，复杂数据状态维护完全由MVVM来统一管理。

二、Vue的生命周期

总共有八个阶段

1. beforeCreate（创建前）在数据观测和初始化事件还未开始，vue的实例挂载元素$el和数据对象data都为undefined

2. created（创建后）完成数据观测，属性和方法的运算，初始化事件，此时data已经有了，$el属性还没有显示出来

3. beforeMount（载入前）在挂载开始前被调用，相关的render函数首次被调用，实际上已完成以下的配置：编译模板，把data里面的数据和模板生成HTML,注意此时还没有挂载html到页面上，为虚拟的dom节点

4. mounted（载入后）在el被新创建的vm.$el替换，并挂载到实例之后被调用，已完成以下的配置：用上面编译好的html内容替换el属性指向的dom对象，并完成模板当中的html渲染，在此过程进行ajax交互，（在vue当中是axios）

5. beforeUpdate（更新前）和updated（更新后），data发生变化时会触发这两个方法。

6. beforeDestory（销毁前）在实例销毁之前调用，实例仍然完全可用

7. destoryed（销毁后），对data的改变不会再触发周期函数，说明此时的vue实例已经解除了事件的监听和vue的绑定，但是dom的结构依然是存在的。

---

1. 什么是vue的生命周期？
   答：vue实例从创建到销毁的过程，就是生命周期。从开始创建，初始化数据，编译模板，挂载DOM-渲染，更新-渲染，销毁等一系列的过程，称之为vue的生命周期

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

3. 第一次页面加载会触发几个钩子？
   beforeCreated created beforeMounted mounted,总共是四个钩子

4. DOM渲染在哪个周期就已经完成？
   在mounted中就要已经完成

5. 简单描述下每个周期适合哪些场景
   beforeCreate：可以在这加个loading事件,在加载实例时触发
   created：初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适应在这里调用
   mounted：挂载元素，获取到dom节点
   updated：如果对数据统一进行处理，在这里写上相应的函数
   beforeDestory：可以在这里做一个确认停止事件的确认框
   nextTick:更新数据后立即操作dom