vue生命周期函数

1. 什么是vue的生命周期

   
   image.png

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

主要分为几个简单，数据初始化，dom 挂载，数据更新，组件卸载，的阶段
在一个就是开启了组件缓存的时候，会有组件启用和组件停用阶段，每个阶段都去前后两个钩子除了缓存的那俩。
数据初始化阶段
beforeCreate：
实例组件刚创建，元素DOM和数据都还没有初始化
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
created：
数据data已经初始化完成，方法也已经可以调用，但是DOM未渲染。
实例已经创建完成之后被调用。
在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始
dom 挂载阶段
beforeMount：
DOM未完成挂载，数据也初始化完成，但是数据的双向绑定还是显示{{}}，这是因为Vue采用了Virtual DOM（虚拟Dom）技术。
在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted：
数据和DOM都完成挂载，在上一个周期占位的数据把值给渲染进去。一般请求会放在这个地方，请求改变数据之后渲染页面。
数据更新阶段
beforeUpdate：
只要是页面数据改变了都会触发，数据更新之前，页面数据还是原来的数据，当你请求赋值一个数据的时候会执行这个周期，如果没有数据改变不执行。
updated：
只要是页面数据改变了都会触发，数据更新完毕，页面的数据是更新完成的。beforeUpdate和updated要谨慎使用，因为页面更新数据的时候都会触发，在这里操作数据很影响性能和容易死循环。
updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated
缓存启用的时候会有下面两个钩子
activated：keep-alive 组件激活时调用。
deactivated：keep-alive 组件停用时调用。
beforeDestroy
这个周期是在组件销毁之前执行。
Destroyed
这个周期是在组件销毁之后执行。