Vue3 有哪些其他的 Composition API

Vue3 带来了诸多令人瞩目的新特性，Composition API 无疑是其中的亮点。除了常见的 reactive 和 ref，还有许多实用的 API 值得深入了解。

computed API 用于创建计算属性。它允许我们基于其他响应式数据定义一个派生值，只有在其依赖的响应式数据发生变化时才会重新计算。例如，在一个购物车应用中，我们可以通过 computed 计算商品总价：

import { ref, computed } from 'vue';
const itemPrices = ref([10, 20, 30]);
const totalPrice = computed(() => itemPrices.value.reduce((acc, price) => acc + price, 0));

这样，当 itemPrices 中的任何价格发生变化时，totalPrice 会自动更新。

watch API 用于监听一个或多个响应式数据的变化，并在变化时执行相应的回调函数。它可以帮助我们在数据变化时执行一些副作用操作，如发送网络请求、更新 DOM 等。比如，监听用户输入的搜索词并触发搜索请求：

import { ref, watch } from 'vue';
const searchQuery = ref('');
watch(searchQuery, (newValue, oldValue) => {
  // 执行搜索请求
  console.log('搜索词变化了:', newValue);
});

provide 和 inject API 是一对用于在组件树中传递数据的 API。provide 用于在父组件中提供数据，inject 用于在子组件中注入该数据，无论组件嵌套有多深。这在共享一些全局配置或状态时非常有用。例如，在一个多组件的应用中，我们可以在根组件中提供一个全局的主题设置：

// 父组件
import { provide } from 'vue';
provide('theme', 'dark');
// 子组件
import { inject } from 'vue';
const theme = inject('theme', 'light');

lifeCycle hooks 在 Composition API 中也有了新的形式，如 onMounted、onUpdated 和 onUnmounted。onMounted 用于在组件挂载后执行代码，onUpdated 在组件更新后执行，onUnmounted 在组件卸载前执行清理操作。

Vue3 的这些 Composition API 极大地提升了代码的可维护性、复用性和逻辑组织能力，开发者能够更加高效地构建复杂的应用程序。