面试总结：Vue的生命周期

Vue一整个生命周期中会有很多个钩子函数提供给我们在不同的时期进行不同的操作，先列出所有的钩子函数:

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

下面就进行详解：

1.在beforeCreate和created之间的生命周期

beforeCreate中其vm实例中的el，data，data中的message都为undefined。

而在created中el还是undefined，而数据已经与data中的属性进行绑定（放在data中属性当值发生改变的同时，视图也会发生变化）

2.created与beforeMount之间的生命周期

首先会判断vue实例中有没有el选项，如果有的话则进行下面的编译，但是如果没有el选项，则停止生命周期，直到vue实例上调用vm.$mount(el)。

继续编译，我们来看template参数的有无对生命周期的影响

（1）如果vue实例对象中有这个参数，则把其当作模板编译成render函数

（2）如果没有这个参数，则把外部的html作为模板编译

（3）template中的模板优先级高于outer HTML模板

在Vue对象中还有render函数，它以createElement作为参数，然后做渲染操做，而且我们可以直接嵌入jsx

new Vue({

    el : "#app",

    render : function (createElement) {

        return createElement("h1","this is createElement")

    }

})

综合排名优先级： render函数选项>template选项>outer HTML

3.beforeMount与mounted之间的生命周期

在这个时期vue实例对象应该添加$el成员，并且替换掉挂在的Bom元素

beforeMount的时候就是页面中的内容还是vue中的占位符，data中的message信息没有被挂在到Bom节点中

mounted时就把vue实例中的data里的message挂载到BOM节点中去

4.beforeUpdate与updated之间的生命周期

在mounted到beforeUpdate之间当内容发生变化时触发

在beforeUpdate到updated之间会进行虚拟BOM 的重新渲染

5.beforeDestroy到destroyed之间的生命周期

beforeDestroy钩子函数在销毁实例之前调用。在这一步，实例还可以完全使用

destroyed钩子函数在Vue实例销毁后调用。调用后，卸载watcher，事件监听，子组件

参考链接：

https://segmentfault.com/a/1190000011381906

https://segmentfault.com/a/1190000011486619