vue3 hooks高级用法

在 Vue 3 的 Composition API 中，还有一些高级用法可以让你更灵活地处理组件逻辑。以下是一些常见的高级用法：

1. `watch`：使用 `watch` 函数来观察响应式数据的变化，并执行相应的回调函数。你可以通过提供要观察的数据和回调函数来使用它。

import { watch, ref } from 'vue';

const count = ref(0);

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

2. `computed`：使用 `computed` 函数来创建一个计算属性。它接受一个 getter 函数，并返回一个具有 `value` 属性的响应式对象。

import { computed, ref } from 'vue';

const count = ref(0);

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

3. `provide` 和 `inject`：使用 `provide` 在父组件中提供数据，然后在子组件中使用 `inject` 来注入这些数据。这可以用于跨层级组件之间的通信。

import { provide, inject } from 'vue';

const myDataSymbol = Symbol();

const ParentComponent = {
  setup() {
    const myData = 'Hello from parent';

    provide(myDataSymbol, myData);
  },
};

const ChildComponent = {
  setup() {
    const myData = inject(myDataSymbol);

    console.log(myData); // 输出：Hello from parent
  },
};

4. `ref` 和 `toRefs` 的组合使用：当你需要将一个响应式对象解构为单个的响应式变量时，可以使用 `toRefs` 函数。

import { ref, toRefs } from 'vue';

const person = ref({ name: 'John', age: 25 });

const { name, age } = toRefs(person);

console.log(name.value); // 输出：John

这些是一些 Vue 3 Composition API 的高级用法，它们可以帮助你更好地管理组件的状态和行为。希望对你有帮助！