vue生命周期钩子

总览

钩子函数	作用	应用场景
beforeCreate(创建前)	获取不到 props 或者 data 中的数据，因为这些数据初始化都在 initState 中	可以在这加一些loading 效果，在created 时进行移除
created(创建后)	可以访问到 data 中的数据，但是这个时候组件还没被挂载，所以看不到	异步请求数据丶页面初始化的工作
beforeMount(载入前)	开始创建 VDOM，相关的 render 函数首次被调用，把 data 里面的数据和模板生成 html
mounted(载入后)	将 VDOM 渲染成真实的 DOM 并且渲染数据，组件中如果有子组件的话，会递归挂载子组件，只有当子组件全部挂载完毕，才会执行根组件的挂载钩子	获取挂载dom元素节点
beforeUpdate（更新前）	数据更新前，发生在虚拟 DOM 重新渲染和打补丁之前，可以在此区间进一步更改状态，不会触发附加的渲染过程
update（更新后）	数据更新后	当数据更新需要做一些业务处理的时候使用
beforeDestory（销毁前）	适合移除事件丶定时器等等，否则会引起内存泄漏的问题
destoryed（销毁后）	进行一系列的销毁操作，如果有子组件的话，也会递归销毁子组件，当所有子组件都销毁完毕后才会执行根组件的 destroyed 钩子函数。
deactivated	用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中执行这个钩子函数
activated	命中缓存渲染后会执行这个函数

Vue 父子组件生命周期执行顺序

Vue 父子组件生命周期钩子的执行顺序遵循：从外到内丶然后从内到外。

父子组件加载渲染过程

父组件beforeCreate -> 父组件created -> 父组件beforeMount -> 子组件beforeCreated -> 子组件created -> 子组件beforeMount -> 子组件mounted -> 父组件mounted

子组件更新过程

父组件beforeUpdate -> 子组件beforeUpdate -> 子组件updated -> 父组件updated

父组件更新过程

父组件beforeUpdate -> 父组件updated

销毁过程

父组件beforeDestory -> 子组件beforeDestory -> 子destoryed -> 父组件destoryed