vue3中的生命周期每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

举例来说，mounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码：

export default {
  mounted() {
    console.log(`the component is now mounted.`)
  }
}

还有其他一些钩子，会在实例生命周期的不同阶段被调用，最常用的是 mounted、updated 和 unmounted。

所有生命周期钩子函数的 this 上下文都会自动指向当前调用它的组件实例。注意：避免用箭头函数来定义生命周期钩子，因为如果这样的话你将无法在函数中通过 this 获取组件实例。

lifecycle.16e4c08e.png

在 Vue 3 的生命周期中，beforeCreate 和 created 是两个钩子函数，用于在 Vue 实例的创建过程中执行特定的操作。

beforeCreate

beforeCreate在组件实例初始化完成之后立即调用。

beforeCreate 是 Vue 实例生命周期中的第一个钩子函数。在这个阶段，Vue 实例已经完成了数据观测（data observation），但是尚未完成模板编译，也没有初始化方法（methods）和计算属性（computed properties）。在 beforeCreate 钩子函数中，你可以执行一些初始化操作，例如读取配置、进行全局事件的注册等。

在 Vue 3 中，可以通过在 Vue 组件的选项中使用 beforeCreate 来定义 beforeCreate 钩子函数：

export default {
  beforeCreate() {
    // 在这里执行一些初始化操作
    // 例如读取配置或进行全局事件的注册
  },
  // ...
}

详细信息

会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。

注意，组合式 API 中的 setup() 钩子会在所有选项式 API 钩子之前调用，beforeCreate() 也不例外。

created

created在组件实例处理完所有与状态相关的选项后调用。

created 是 Vue 实例生命周期中的第二个钩子函数。在 created 钩子函数中，Vue 实例已经完成了数据观测、模板编译和初始化方法与计算属性的设置。此时，Vue 实例已经创建完成，可以访问它的数据、计算属性和方法。

在 created 钩子函数中，你可以执行一些需要访问数据的操作，例如进行异步请求、订阅事件、更新 DOM 等。

在 Vue 3 中，可以通过在 Vue 组件的选项中使用 created 来定义 created 钩子函数：

export default {
    created() { 
    // 在这里执行一些需要访问数据的操作 // 例如进行异步请求、订阅事件、更新 DOM 等 
    }, 
    // ... 
}

详细信息

当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。

Vue3中的 beforeCreate 和 created

在 Vue 3 中的 Composition API 中，没有直接使用 beforeCreate 和 created 的概念，因为 Composition API 的 setup 函数在 Vue 3 中替代了它们的作用。

在 setup 函数中，你可以执行与 beforeCreate 和 created 钩子函数相似的操作，例如初始化数据、访问数据等。下面是在 setup 中执行类似操作的示例：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref, onBeforeMount, onMounted } from 'vue';

// 在 onBeforeMount 阶段执行初始化操作
onBeforeMount(() => {
  // 初始化数据
});

// 在 onMounted 阶段执行访问数据的操作
onMounted(() => {
  // 访问数据
});

// 其他逻辑代码
const message = ref('Hello, Vue 3!');
</script>

beforeMount

beforeMount 在组件被挂载之前调用。

beforeMount 是 Vue 3 生命周期中的第一个挂载阶段的钩子函数。在这个阶段，Vue 实例已经完成了模板的编译，并将要把生成的虚拟 DOM 树挂载到页面上的指定位置。但是，在挂载之前，实际的 DOM 元素尚未生成。

在 beforeMount 钩子函数中，你可以执行一些与 DOM 相关的准备工作，例如获取 DOM 元素的引用、订阅事件、初始化第三方库等。

在 Vue 3 中，可以通过在组件选项中使用 beforeMount 来定义 beforeMount 钩子函数：

export default {
  beforeMount() {
    // 在这里执行一些与 DOM 相关的准备工作
    // 例如获取 DOM 元素的引用、订阅事件、初始化第三方库等
  },
  // ...
}

详细信息

当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。

这个钩子在服务端渲染时不会被调用。

mounted

mounted 在组件被挂载之后调用。

mounted 是 Vue 3 生命周期中的第二个挂载阶段的钩子函数。在这个阶段，Vue 实例的虚拟 DOM 已经成功挂载到实际的 DOM 元素上，并且可以进行访问、操作和交互。

在 mounted 钩子函数中，你可以执行一些需要访问 DOM 的操作，例如初始化特定的 UI 插件、发送异步请求、启动定时器等。

在 Vue 3 中，可以通过在组件选项中使用 mounted 来定义 mounted 钩子函数：

export default {
  mounted() {
    // 在这里执行一些需要访问 DOM 的操作
    // 例如初始化特定的 UI 插件、发送异步请求、启动定时器等
  },
  // ...
}

详细信息

组件在以下情况下被视为已挂载：

所有同步子组件都已经被挂载。(不包含异步组件或 <Suspense> 树内的组件)
其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。

这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。

这个钩子在服务端渲染时不会被调用。

Vue3中的 beforeMount 和 mounted

在 Vue 3 的 Composition API 中，你可以使用 onBeforeMount 和 onMounted 来替代 beforeMount 和 mounted 生命周期钩子函数。这两个函数可以在 setup 函数中使用，以执行类似的操作。

使用 onBeforeMount： 可以在 setup 函数中使用 onBeforeMount 钩子函数来模拟 beforeMount 生命周期钩子的功能。在 onBeforeMount 钩子函数中，你可以执行与 DOM 相关的准备工作。

以下是使用 onBeforeMount 的示例：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount } from 'vue';

// 在 onBeforeMount 阶段执行准备工作
onBeforeMount(() => {
  // 执行与 DOM 相关的准备工作
});
</script>

在上面的示例中，我们在 setup 函数中使用了 onBeforeMount 钩子函数，并在其回调函数中执行与 DOM 相关的准备工作。

使用 onMounted： 可以在 setup 函数中使用 onMounted 钩子函数来模拟 mounted 生命周期钩子的功能。在 onMounted 钩子函数中，你可以执行需要访问和操作 DOM 的操作。

以下是使用 onMounted 的示例：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

// 在 onMounted 阶段执行需要访问和操作 DOM 的操作
onMounted(() => {
  // 执行需要访问和操作 DOM 的操作
});
</script>

在上面的示例中，我们在 setup 函数中使用了 onMounted 钩子函数，并在其回调函数中执行需要访问和操作 DOM 的操作。

使用 onBeforeMount 和 onMounted 钩子函数可以在 Vue 3 的 setup 中模拟 beforeMount 和 mounted 生命周期钩子的功能。

beforeUpdate

beforeUpdate在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。

beforeUpdate 是 Vue 3 生命周期中的一个更新阶段的钩子函数。在这个阶段，组件的数据已经发生变化，但是 Vue 实例尚未重新渲染 DOM。在 beforeUpdate 钩子函数中，你可以执行一些在重新渲染之前需要进行的准备工作。在 Vue 3 中，可以通过在组件选项中使用 beforeUpdate 来定义 beforeUpdate 钩子函数：

export default {
  beforeUpdate() {
    // 在这里执行一些在重新渲染之前需要进行的准备工作
  },
  // ...
}

详细信息

这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。

这个钩子在服务端渲染时不会被调用。

updated

updated 在组件因为一个响应式状态变更而更新其 DOM 树之后调用。

updated 是 Vue 3 生命周期中的一个更新阶段的钩子函数。在这个阶段，Vue 实例已经完成了重新渲染 DOM 的过程。在 updated 钩子函数中，你可以执行一些在 DOM 重新渲染之后需要进行的操作，例如访问更新后的 DOM 元素、执行某些动画效果等。

在 Vue 3 中，可以通过在组件选项中使用 updated 来定义 updated 钩子函数

export default {
  updated() {
    // 在这里执行一些在 DOM 重新渲染之后需要进行的操作
  },
  // ...
}

详细信息

父组件的更新钩子将在其子组件的更新钩子之后调用。

这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。

这个钩子在服务端渲染时不会被调用。

不要在 updated 钩子中更改组件的状态，这可能会导致无限的更新循环！

总结来说，beforeUpdate 钩子函数在 Vue 组件更新之前执行，可以用于执行在重新渲染之前需要进行的准备工作。而 updated 钩子函数在 Vue 组件更新之后执行，可以用于执行在 DOM 重新渲染之后需要进行的操作。

Vue3中的 beforeUpdate 和 updated

在 Vue 3 的 Composition API 中，你可以使用 onBeforeUpdate 和 onUpdated 来模拟 beforeUpdate 和 updated 生命周期钩子函数。这两个函数可以在 setup 函数中使用，以执行类似的操作。

使用 onBeforeUpdate： 可以在 setup 函数中使用 onBeforeUpdate 钩子函数来模拟 beforeUpdate 生命周期钩子的功能。在 onBeforeUpdate 钩子函数中，你可以执行一些在组件更新之前需要进行的准备工作。

以下是使用 onBeforeUpdate 的示例：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script setup lang="ts">
import { onBeforeUpdate } from 'vue';

// 在 onBeforeUpdate 阶段执行准备工作
onBeforeUpdate(() => {
  // 执行在组件更新之前需要进行的准备工作
});
</script>

在上面的示例中，我们在 setup 函数中使用了 onBeforeUpdate 钩子函数，并在其回调函数中执行在组件更新之前需要进行的准备工作。

使用 onUpdated： 可以在 setup 函数中使用 onUpdated 钩子函数来模拟 updated 生命周期钩子的功能。在 onUpdated 钩子函数中，你可以执行一些在组件更新之后需要进行的操作。

以下是使用 onUpdated 的示例：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script setup lang="ts">
import { onUpdated } from 'vue';

// 在 onUpdated 阶段执行操作
onUpdated(() => {
  // 执行在组件更新之后需要进行的操作
});
</script>

在上面的示例中，我们在 setup 函数中使用了 onUpdated 钩子函数，并在其回调函数中执行在组件更新之后需要进行的操作。

使用 onBeforeUpdate 和 onUpdated 钩子函数可以在 Vue 3 的 setup 中模拟 beforeUpdate 和 updated 生命周期钩子的功能。

beforeUnmount

beforeUnmount在一个组件实例被卸载之前调用。

beforeUnmount是Vue 3生命周期中的一个卸载阶段的钩子函数。在这个阶段，组件即将被卸载，但是实际的DOM元素和组件实例仍然可用。beforeUnmount钩子函数在卸载之前执行，允许你执行一些在组件被卸载之前需要进行的清理工作和资源释放操作。

可以通过在组件选项中使用beforeUnmount来定义beforeUnmount钩子函数：

export default {
  beforeUnmount() {
    // 在这里执行一些在组件被卸载之前需要进行的清理工作和资源释放操作
  },
  // ...
}

详细信息

当这个钩子被调用时，组件实例依然还保有全部的功能。

这个钩子在服务端渲染时不会被调用。

unmounted

unmounted在一个组件实例被卸载之后调用。

unmounted是Vue 3生命周期中的一个卸载阶段的钩子函数。在这个阶段，组件已经被卸载，DOM元素和组件实例已不再存在。unmounted钩子函数在组件被完全卸载后执行，可以用于执行一些与组件生命周期结束相关的操作。

可以通过在组件选项中使用unmounted来定义unmounted钩子函数：

export default {
  unmounted() {
    // 在这里执行一些与组件生命周期结束相关的操作
  },
  // ...
}

详细信息

一个组件在以下情况下被视为已卸载：

其所有子组件都已经被卸载。
所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。

可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。

这个钩子在服务端渲染时不会被调用。

Vue3中的 onBeforeUnmount 和 onUnmounted

在 Vue 3 的 Composition API 中，你可以使用 onBeforeUnmount 和 onUnmounted 来模拟 beforeUnmount 和 unmounted 生命周期钩子函数。这两个函数可以在 setup 函数中使用，以执行类似的操作。

使用 onBeforeUnmount： 可以在 setup 函数中使用 onBeforeUnmount 钩子函数来模拟 beforeUnmount 生命周期钩子的功能。在 onBeforeUnmount 钩子函数中，你可以执行一些在组件卸载之前需要进行的清理工作和资源释放操作。

以下是使用 onBeforeUnmount 的示例：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script setup lang="ts">
import { onBeforeUnmount } from 'vue';

// 在 onBeforeUnmount 阶段执行清理工作和资源释放操作
onBeforeUnmount(() => {
  // 执行在组件卸载之前需要进行的清理工作和资源释放操作
});
</script>

在上面的示例中，我们在 setup 函数中使用了 onBeforeUnmount 钩子函数，并在其回调函数中执行在组件卸载之前需要进行的清理工作和资源释放操作。

使用 onUnmounted： 可以在 setup 函数中使用 onUnmounted 钩子函数来模拟 unmounted 生命周期钩子的功能。在 onUnmounted 钩子函数中，你可以执行一些与组件生命周期结束相关的操作。

以下是使用 onUnmounted 的示例：

<template>
  <div>
    <!-- 组件内容 -->
  </div>
</template>

<script setup lang="ts">
import { onUnmounted } from 'vue';

// 在 onUnmounted 阶段执行与组件生命周期结束相关的操作
onUnmounted(() => {
  // 执行与组件生命周期结束相关的操作
});
</script>

在上面的示例中，我们在 setup 函数中使用了 onUnmounted 钩子函数，并在其回调函数中执行与组件生命周期结束相关的操作。

使用 onBeforeUnmount 和 onUnmounted 钩子函数可以在 Vue 3 的 setup 中模拟 beforeUnmount 和 unmounted 生命周期钩子的功能。

vue3中的生命周期

beforeCreate​

created

beforeMount

mounted

beforeUpdate

updated

beforeUnmount

unmounted

beforeCreate