前言
生命周期的概念在 React、Vue、小程序等开发环境里是一个不可避免且极为重要的概念。生命周期其实针对整个App、页面、组件都是一个比较普适的概念，从字面上看，是将对象从创建到销毁的过程看作一个生命周期，如同生物体的生老病死。
在 Vue 中，生命周期这个概念主要针对组件或者说 Vue 实例。在实例创建到销毁的过程中，经历了一系列变化以及 Vue 在背后进行的复杂操作。生命周期的意义在于将这个渲染的过程通过一些具体的函数暴露给开发者，从而利于其在实例渲染的不同阶段进行想要实现的操作。例如，我希望实例在已创建但未渲染之前做些什么，或在刷新数据页面更新之前做些什么，就必须用到生命周期函数。生命周期函数也是生命周期的最具体的体现，这些生命周期函数会根据实例的生命周期的进程进行自调用。
Vue 的生命周期主要体现为以下函数：
beforeCreate
在这个阶段，Vue 实例还未被创建，但 Vue 初始化了 data、methods、computed、state、props 等基本数据，为实例的创建和使用做好准备。
created
在这个阶段，Vue 实例已经被创建。Vue 开始对其进行一些重要的操作。在 Vue 中，数据的响应要经历一系列操作、在这个过程里要进行一系列的准备工作。包括数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。
beforeMount
在这个阶段，Vue 实例已经创建完成，但还未被挂载到它被使用的位置。在此之前及 created 之后，Vue 进行了实例挂载位置的判断、模板是否存在的判断，如果二者为 true，这个阶段会调用 render 函数开始渲染模板。
mounted
实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。注意 mounted 不会保证所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick (参考文章 Vue 响应式原理初探 )：
mounted: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been rendered
})
}
beforeUpdate
数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性，或 watcher 取而代之。注意 updated 不会保证所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以在 updated 里使用 vm.$nextTick：
updated: function () {
this.$nextTick(function () {
// Code that will run only after the
// entire view has been re-rendered
})
}
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed
实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
实际使用
1 beforeCreate：可以发请求，但是不能赋值给data里面的数据
2 created：发请求，初始渲染的工作在此处执行
3 beforeMount：虚拟DOM生成，数据未挂载
4 mounted：虚拟DOM解析，数据已经挂载，进行获取DOM元素
5 beforeupdate：数据更新之前调用
6 updated：数据更新之后调用
7 beforedestroy：在销毁之前调用
8 destoryed：在销毁之后调用，定时器清除，事件移除都可以在此处去写
Vue 的生命周期要往深了研究会非常复杂，在日常使用中，主要还是利用生命周期钩子函数来针对实例的不同发展阶段进行一些操作，常用的生命周期钩子函数也就三个：created，mounted，beforedestroy。
网友评论