Back to home

在Vue 3中父子组件完整的生命周期

5 min read

在Vue 3中,父子组件的生命周期如下:

父组件生命周期:

  1. beforeCreate: 组件实例被创建之前调用,此时组件的data和methods未初始化。
  2. created: 组件实例创建完成后调用,此时组件的data和methods已经初始化完成,但尚未挂载到DOM上。
  3. beforeMount: 组件被挂载到DOM之前调用。
  4. mounted: 组件被挂载到DOM之后调用,此时组件已经被渲染到页面上。
  5. beforeUpdate: 组件数据更新之前调用,发生在重新渲染之前。
  6. updated: 组件数据更新之后调用,发生在重新渲染之后。
  7. beforeUnmount: 组件被卸载之前调用。
  8. unmounted: 组件被卸载之后调用。

子组件生命周期:

  1. beforeCreate: 组件实例被创建之前调用,此时组件的data和methods未初始化。
  2. created: 组件实例创建完成后调用,此时组件的data和methods已经初始化完成,但尚未挂载到DOM上。
  3. beforeMount: 组件被挂载到DOM之前调用。
  4. mounted: 组件被挂载到DOM之后调用,此时组件已经被渲染到页面上。
  5. beforeUpdate: 组件数据更新之前调用,发生在重新渲染之前。
  6. updated: 组件数据更新之后调用,发生在重新渲染之后。
  7. beforeUnmount: 组件被卸载之前调用。
  8. unmounted: 组件被卸载之后调用。