跳到主要内容

生命周期

生命周期函数

  • 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

参考