生命周期

生命周期函数

• beforeCreate(创建前) vue 实例的挂载元素$el 和数据对象 data 都是 undefined, 还未初始化
• created(创建后) 完成了 data 数据初始化, el 还未初始化
• beforeMount(载入前) vue 实例的$el 和 data 都初始化了, 相关的 render 函数首次被调用
• mounted(载入后) 此过程中进行 ajax 交互
• beforeUpdate(更新前)
• updated(更新后)
• beforeDestroy(销毁前)
• destroyed(销毁后)

Vue 的父组件和子组件生命周期钩子执行顺序是什么?

• 渲染过程：父组件挂载完成一定是等子组件都挂载完成后，才算是父组件挂载完，所以父组件的 mounted 在子组件 mouted 之后。
  • 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
• 子组件更新过程：
  • 影响到父组件：父 beforeUpdate -> 子 beforeUpdate->子 updated -> 父 updted
  • 不影响父组件：子 beforeUpdate -> 子 updated
• 父组件更新过程：
  • 影响到子组件：父 beforeUpdate -> 子 beforeUpdate->子 updated -> 父 updted
  • 不影响子组件：父 beforeUpdate -> 父 updated
• 销毁过程：
  • 父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

参考

• https://juejin.cn/post/6844904079164964871