在 Vue.js 中，组合式 API 是一个强大的工具，它使我们能够更好地组织和重用逻辑。组合式 API 提供了一种更灵活的方式来处理组件中的状态、事件处理器和计算属性等。这一章将介绍如何使用组合式 API，并结合 Vue3 的生命周期钩子来构建功能丰富的组件。
组合式 API 简介
组合式 API 是 Vue3 引入的一个新特性，旨在解决选项式 API 在处理复杂逻辑时可能遇到的问题，如代码重复、可读性和可维护性差等。组合式 API 通过 setup 函数来实现，允许我们将逻辑以函数的形式组织在一起，从而提高代码的复用性和可维护性。
使用 setup 函数
在组合式 API 中，所有的逻辑都放在 setup 函数中，这个函数会在组件创建之前执行，并且只能返回对象或渲染函数。下面是一个简单的例子：
-- -------------------- ---- -------
----------
-----
----- ------- ------
------- --------------------- -- ----- -- ----------
------
-----------
--------
------ - --- - ---- ------
------ ------- -
------- -
----- ----- - -------
----- ------- - -------- -----
-------- ----------- -
--------------
-
------ -
------
--------
---------
--
-
-
---------在这个例子中，我们定义了两个响应式变量 count 和 message，并提供了一个 increment 方法来增加 count 的值。最后，我们通过 return 语句将这些变量和方法暴露给模板。
生命周期钩子
生命周期钩子是 Vue 组件在其生命周期的不同阶段触发的特定函数。在 Vue3 中，我们可以继续使用生命周期钩子，也可以通过组合式 API 来访问它们。以下是一些常见的生命周期钩子及其用法：
beforeCreate 和 created
这两个钩子在组合式 API 中不再直接使用，因为它们在 setup 函数执行之前就已经被调用了。然而，我们可以通过其他方式来替代它们的功能。
beforeMount 和 mounted
这两个钩子用于在组件挂载前后执行某些操作。例如，在 mounted 钩子中可以进行 DOM 操作或者初始化第三方库。
-- -------------------- ---- -------
------ - ---------- ----------- - ---- ------
------ ------- -
------- -
--- ------
-------- ------------ -
----- - -------------- -- -
-------------------------
-- ------
-
-------- ----------- -
---------------------
-
----------------------
-----------------------
-- -------
-
-在这个例子中，我们在组件挂载后启动一个定时器，并在组件卸载前停止它，避免内存泄漏。
beforeUpdate 和 updated
这两个钩子在数据更新前后被调用。我们可以在 beforeUpdate 钩子中做一些准备工作，而在 updated 钩子中处理一些依赖于 DOM 的逻辑。
beforeDestroy 和 destroyed
这两个钩子在 Vue2 中用于清理工作，但在 Vue3 中已经被 onBeforeUnmount 和 onUnmounted 取代。我们可以使用这些新的组合式 API 来执行清理任务。
-- -------------------- ---- -------
------ - --------------- - ---- ------
------ ------- -
------- -
--- ------
-------- ------------ -
----- - -------------- -- -
-------------------------
-- ------
-
-------- ----------- -
---------------------
-
---------------------------
----------------------
-- -------
-
-在这个例子中，我们使用 onBeforeUnmount 钩子来清理定时器，确保在组件卸载前释放资源。
总结
组合式 API 和生命周期钩子是 Vue3 中非常重要的概念，它们帮助我们更好地组织代码，提升应用的性能和可维护性。通过本章的学习，你应该对如何使用组合式 API 以及如何结合生命周期钩子来构建功能丰富且易于维护的组件有了深入的理解。