学习Composition API的基本使用方法和常见的Hooks（如reactive、computed、watch等）

Composition API 是 Vue 3 中引入的新特性，它通过一种更灵活的方式来组织和重用组件逻辑。下面是 Composition API 的基本使用方法和常见的 Hooks：

1. reactive：用于将普通的数据转换为响应式数据。可以使用 reactive 函数将一个普通对象转换成响应式对象，这样当响应式对象的属性发生变化时，相关的视图会自动更新。

import { reactive } from "vue";

const state = reactive({
  count: 0,
});

console.log(state.count); // 输出 0

state.count++; // 修改 count 的值

console.log(state.count); // 输出 1，视图自动更新

2. computed：用于创建计算属性。computed 函数接收一个 getter 函数，返回一个计算属性对象。计算属性的值会根据其依赖的响应式数据动态计算，并且只有在依赖发生变化时才会重新计算。

import { reactive, computed } from "vue";

const state = reactive({
  count: 0,
});

const doubleCount = computed(() => {
  return state.count * 2;
});

console.log(doubleCount.value); // 输出 0

state.count++; // 修改 count 的值

console.log(doubleCount.value); // 输出 2，自动重新计算

3. watch：用于观察响应式数据的变化。watch 函数接收两个参数：要观察的响应式数据和回调函数。当响应式数据发生变化时，回调函数会被调用。

import { reactive, watch } from "vue";

const state = reactive({
  count: 0,
});

watch(
  () => state.count,
  (newCount, oldCount) => {
    console.log(`count 变化了：${oldCount} => ${newCount}`);
  }
);

state.count++; // 输出 "count 变化了：0 => 1"

这些是 Composition API 中常见的 Hooks。除了上述的 Hooks，还有其他一些常用的 Hooks，如：ref、toRefs、onMounted 等。你可以根据具体的需求去使用它们。希望能对你有所帮助！