当前位置：首页 > article >正文

【Vue】Composition API 钩子

article 2025/1/6 4:11:38

Composition API 是 Vue 3 引入的一种新的组件编写方式，它提供了一种更灵活的逻辑复用和代码组织的方法。Composition API 钩子（也称为 Composition Functions 或 Composition Helpers）是一组在 setup 函数中使用的函数，它们提供了对 Vue 响应式系统的访问。

在 Vue 3 中，组件的 setup 函数是一个在组件创建之前被调用的特殊函数，它允许你使用 Composition API 来声明组件的响应式状态、计算属性、监听器等。

下面是一些常用的 Composition API 钩子：

ref：用于创建一个响应式的引用，可以存储任何值，包括原始类型和对象。
```
const count = ref(0);
```
reactive：用于创建一个响应式的对象，可以包含多个属性。
```
const state = reactive({ count: 0 });
```
computed：用于创建一个计算属性，它根据响应式状态的变化自动更新。
```
const doubledCount = computed(() => count.value * 2);
```

watch：用于观察一个响应式引用或反应式对象的属性，并在其变化时执行回调函数。

watch(count, (newValue, oldValue) => {
  console.log(`Count changed from ${oldValue} to ${newValue}`);
});

onMounted、onUpdated、onUnmounted：这些生命周期钩子在组件的不同生命周期阶段被调用。
```
onMounted(() => {
  console.log('Component is mounted');
});
```
provide 和 inject：用于在组件树中传递数据，而不必通过每个层级手动传递 props。
```
provide('theme', 'dark');
```
toRefs：将一个反应式对象转换为一组响应式引用，这在解构反应式对象时非常有用。
```
const { count } = toRefs(state);
```
toRaw：获取一个反应式对象的原始版本，这在需要获取非响应式数据时非常有用。
```
const rawState = toRaw(state);
```