简单归纳总结《Vue生命周期》

用Vue框架，熟悉它的生命周期可以让开发更好的进行。

首先看看官网的图，详细的给出了vue的生命周期:

总共分为8个阶段：

beforeCreate（创建前）,

created（创建后）,

beforeMount(载入前),

mounted（载入后）,

beforeUpdate（更新前）,

updated（更新后）,

beforeDestroy（销毁前）,

destroyed（销毁后）

 

在谈到Vue的生命周期的时候，我们首先需要创建一个实例，也就是在new Vue ( ) 的对象过程当中，首先执行了init（init是vue组件里面默认去执行的），在init的过程当中首先调用了beforeCreate，然后在injections和reactivity的时候，它会再去调用created。所以在init的时候，事件已经调用了，我们在beforeCreate的时候千万不要去修改data里面赋值的数据，最早也要放在created里面去做。

当created完成之后，它会去判断instance里面是否含有“el”option，如果没有的话，它会调用vm.$mount(el)这个方法，然后执行下一步；如果有的话，直接执行下一步。紧接着会判断是否含有“template”这个选项，如果有的话，它会把template解析成一个render function，这是一个template编译的过程，结果是解析成了render函数：

render (h) {

  return h('div', {}, this.text)

}

render函数里面的传参h就是Vue里面的createElement方法，return返回一个createElement方法，其中要传3个参数，第一个参数就是创建的div标签；第二个参数传了一个对象，对象里面可以是我们组件上面的props，或者是事件之类的东西；第三个参数就是div标签里面的内容，这里我们指向了data里面的text。

使用render函数的结果和我们之前使用template解析出来的结果是一样的。render函数是发生在beforeMount和mounted之间的，这也从侧面说明在beforeMount的时候，$el还只是我们在HTML里面写的节点，然后到mounted的时候，它就把渲染出来的内容挂载到了DOM节点上。这中间的过程其实是执行了render function的内容。

在使用.vue文件开发的过程当中，我们在里面写了template模板，在经过了vue-loader的处理之后，就变成了render function，最终放到了vue-loader解析过的文件里面。由于在解析template变成render function的过程，是一个非常耗时的过程，vue-loader帮我们处理了这些内容之后，当我们在页面上执行vue代码的时候，效率会变得更高。

beforeMount在有了render function的时候才会执行，当执行完render function之后，就会调用mounted这个钩子，在mounted挂载完毕之后，这个实例就算是走完流程了。

后续的钩子函数执行的过程都是需要外部的触发才会执行。比如说有数据的变化，会调用beforeUpdate，然后经过Virtual DOM，最后updated更新完毕。当组件被销毁的时候，它会调用beforeDestory，以及destoryed。

 

钩子函数，其实和回调是一个概念，当系统执行到某处时，检查是否有hook，有则回调。简言之，每个组件都有属性，方法和事件。所有的生命周期都归于事件，在某个时刻自动执行。

 

生命周期钩子：

beforeCreate: 实例初始化之后，this指向创建的实例，不能访问到data、computed、watch、methods上的方法和数据。常用于初始化非响应式变量。

Created: 实例创建完成，可访问data、computed、watch、methods上的方法和数据，未挂载到DOM，不能访问到$el属性，$ref属性内容为空数组。常用于简单的ajax请求，页面的初始化。

beforeMount: 在挂载开始之前被调用，beforeMount之前，会找到对应的tempiate，并编译成render函数。

Mounted: 实例挂载到DOM上，此时可以通过DOM API获取到DOM节点，$ref属性可以访问。常用于获取VNode信息和操作，ajax请求。

beforeUpdate: 响应式数据更新时调用，发生在虚拟DOM打补丁之前。适合在更新之前访问现有的DOM，比如手动移除已添加的事件监听器。

Updated: 虚拟DOM重新渲染和打补丁之后调用，组件DOM已经更新，可执行依赖于DOM的操作，避免在这个钩子函数中操作数据，可能陷入死循环。

beforeDestroy: 实例销毁之前调用，这一步实例仍然完全可用，this仍然能获取到实例。常用于销毁定时器、解绑全局事件、销毁插件对象等操作。

Destroyed: 实例销毁后调用，调用后，Vue实例指示的所有东西都会解绑定，所有的时间监听器会被移除，所有的子实例也会被销毁。

 

提示：

1.created阶段的ajax请求与mounted请求的区别：前者页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态。

2.mounted 不会承诺所有的子组件也都一起被挂载。