Vue生命周期执行顺序详解

前端

2024-01-02 05:51:37

了解Vue生命周期执行顺序对于理解Vue应用程序的行为至关重要。生命周期钩子函数提供了在组件的不同阶段插入自定义逻辑的机会，从而增强应用程序的控制和可扩展性。

Vue生命周期执行顺序

Vue组件的生命周期包括以下阶段：

beforeCreate ：创建组件实例之前触发。
created ：创建组件实例后触发。
beforeMount ：挂载组件之前触发。
mounted ：挂载组件后触发。
beforeUpdate ：在更新组件之前触发。
updated ：在更新组件后触发。
beforeDestroy ：销毁组件之前触发。
destroyed ：销毁组件后触发。

执行顺序

生命周期钩子函数以以下顺序执行：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

注意：mounted和updated钩子函数只在组件首次挂载或更新后触发。

示例

考虑以下Vue组件：

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '初始标题'
    }
  },
  created() {
    console.log('组件已创建');
  },
  mounted() {
    console.log('组件已挂载');
  },
  updated() {
    console.log('组件已更新');
  },
  destroyed() {
    console.log('组件已销毁');
  }
}
</script>