在 Vue 3.2 及以上版本hooks的使用方法介绍

在 Vue 3.2 及以上版本，使用 Composition API 时，你可以使用一组称为 "Hooks" 的函数来组织组件逻辑。以下是一些常见的 Vue 3.2 Hooks：

ref：用于创建响应式数据。

import { ref } from 'vue';

const count = ref(0);

reactive：用于创建响应式对象。

javascriptCopy code
import { reactive } from 'vue';

const state = reactive({
  message: 'Hello, Vue 3.2!',
  count: 0
});

toRefs：将响应式对象转换为响应式引用。

import { reactive, toRefs } from 'vue';

const state = reactive({
  message: 'Hello, Vue 3.2!',
  count: 0
});

const { message, count } = toRefs(state);
computed：创建计算属性。
javascriptCopy code
import { ref, computed } from 'vue';

const count = ref(0);
const squared = computed(() => count.value * count.value);

watch：用于监视数据变化。

import { ref, watch } from 'vue';

const count = ref(0);

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

onMounted、onUpdated、onUnmounted：分别在组件被挂载、更新和卸载时执行的生命周期钩子。

import { onMounted, onUpdated, onUnmounted } from 'vue';

onMounted(() => {
  console.log('Component mounted');
});

onUpdated(() => {
  console.log('Component updated');
});

onUnmounted(() => {
  console.log('Component unmounted');
});

这只是 Composition API 的一小部分，你可以根据需要使用其他 Hook 函数。这些 Hook 函数使得组织组件逻辑更加灵活和直观。详细的文档可以在 Vue 官方文档中找到：Composition API。