深入剖析Vue生命周期及其嵌套时的执行顺序

前端

2024-02-13 20:22:05

Vue生命周期的概述

Vue生命周期由一系列钩子函数组成，这些钩子函数在组件的不同生命周期阶段被调用。这些钩子函数可以帮助您在组件的不同阶段执行特定的操作，例如获取数据、更新视图、处理事件等。

Vue生命周期各个阶段

Vue生命周期的各个阶段如下：

beforeCreate: 在组件实例化之前被调用。
created: 在组件实例化之后立即被调用。
mounted: 在组件挂载到DOM之后被调用。
updated: 在组件更新之后被调用。
activated: 在组件被激活之后被调用。
deactivated: 在组件被停用之后被调用。
beforeDestroy: 在组件销毁之前被调用。
destroyed: 在组件销毁之后被调用。

父子组件嵌套时的执行顺序

在父子组件嵌套时，生命周期的执行顺序如下：

父组件的beforeCreate钩子函数被调用。
父组件的created钩子函数被调用。
子组件的beforeCreate钩子函数被调用。
子组件的created钩子函数被调用。
子组件的mounted钩子函数被调用。
父组件的mounted钩子函数被调用。
父组件的updated钩子函数被调用。
子组件的updated钩子函数被调用。
子组件的beforeDestroy钩子函数被调用。
父组件的beforeDestroy钩子函数被调用。
子组件的destroyed钩子函数被调用。
父组件的destroyed钩子函数被调用。

示例

以下是一个示例，展示了父子组件嵌套时的生命周期执行顺序：

// 父组件
export default {
  beforeCreate() {
    console.log('父组件beforeCreate');
  },
  created() {
    console.log('父组件created');
  },
  mounted() {
    console.log('父组件mounted');
  },
  updated() {
    console.log('父组件updated');
  },
  beforeDestroy() {
    console.log('父组件beforeDestroy');
  },
  destroyed() {
    console.log('父组件destroyed');
  }
};

// 子组件
export default {
  beforeCreate() {
    console.log('子组件beforeCreate');
  },
  created() {
    console.log('子组件created');
  },
  mounted() {
    console.log('子组件mounted');
  },
  updated() {
    console.log('子组件updated');
  },
  beforeDestroy() {
    console.log('子组件beforeDestroy');
  },
  destroyed() {
    console.log('子组件destroyed');
  }
};

运行此示例，您将看到以下输出：

父组件beforeCreate
父组件created
子组件beforeCreate
子组件created
子组件mounted
父组件mounted
父组件updated
子组件updated
子组件beforeDestroy
父组件beforeDestroy
子组件destroyed
父组件destroyed

从输出中可以看出，父组件的生命周期钩子函数在子组件的生命周期钩子函数之前被调用，并且父组件的生命周期钩子函数在子组件的生命周期钩子函数之后被调用。

总结

Vue生命周期是一个非常重要的概念，掌握Vue生命周期的各个阶段以及父子组件嵌套时的执行顺序对于理解Vue应用程序的运作机制至关重要。希望本文能够帮助您加深对Vue生命周期的理解。