Vue基础之生命周期

提示：本文全长约2300字，完整阅读需要花费8分钟左右。

---

前言

上一篇已经介绍过如何在 VSCode 里面编辑你所想要的代码了，点击回顾 Vue 之代码初体验。

从本篇文章开始，进入 Vue 基础内容的学习，这里我们将重点学习 Vue 生命周期、Vue 指令、监听器及计算属性三个部分。

---

一、Vue 生命周期是什么？

通俗的来说，从生命开始一直到死亡的过程，这一个过程称为一个生命周期（Life Cycle）。而 Vue 生命周期 定义也与之类似，是指一个组件从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。

二、Vue 生命周期函数

生命周期函数：是由 Vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

Vue生命周期里最重要的就是下面的8个生命周期函数：

1.组件创建阶段

beforeCreate

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

// 类型	ts
interface ComponentOptions {
  beforeCreate?(this: ComponentPublicInstance): void
}

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

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

created

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

// 类型	ts
interface ComponentOptions {
  created?(this: ComponentPublicInstance): void
}

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

beforeMount

在组件被挂载之前调用。

// 类型	ts
interface ComponentOptions {
  beforeMount?(this: ComponentPublicInstance): void
}

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

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

mounted

在组件被挂载之后调用。

// 类型	ts
interface ComponentOptions {
  mounted?(this: ComponentPublicInstance): void
}

• 详细信息
  组件在以下情况下被视为已挂载：

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

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

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

2.组件运行阶段

beforeUpdate

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

// 类型	ts
interface ComponentOptions {
  beforeUpdate?(this: ComponentPublicInstance): void
}

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

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

updated

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

// 类型	ts
interface ComponentOptions {
  updated?(this: ComponentPublicInstance): void
}

• 详细信息
  父组件的更新钩子将在其子组件的更新钩子之后调用。

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

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

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

3.组件销毁阶段

beforeDestroy

注意：在 Vue 3 中 beforeDestroy 生命周期选项被重命名为 beforeUnmount

在一个组件实例被销毁之前调用。

// 类型	ts
interface ComponentOptions {
  beforeDestroy?(this: ComponentPublicInstance): void
}

• 详细信息
  将要销毁此组件，此时尚未销毁，组件还处于正常工作的状态

destroyed

注意：在 Vue 3 中 destroyed 生命周期选项被重命名为 unmounted

在一个组件实例被销毁之后调用。

// 类型	ts
interface ComponentOptions {
  destroyed?(this: ComponentPublicInstance): void
}

• 详细信息
  组件已经被销毁，此组件在浏览器中对应的DOM结构已被完全移除!

---

总结

以上就是今天要讲的内容，本文仅仅简单介绍了Vue基础内容中的生命周期这一内容，以及生命周期三个阶段中比较重要的8个生命周期函数，但是这一章的内容对于Vue的学习非常重要，也是前端面试常问的问题，所以还是要多熟悉多使用。

最后，如果本篇文章对正在阅读的您有所帮助或启发，请不要吝啬您的点赞收藏分享加评论，这样就可以让更多的人看到了。同时也欢迎留下您遇到的问题，让我们一起探讨学习，共同进步！

下一篇：Vue基础之指令