Vue 3 Composition API: 避免重复引入 ref 和 reactive

在 Vue 3 中，可以使用 Composition API 来避免重复引入 'ref' 和 'reactive'。

Composition API 提供了一个 'setup' 函数，可以在该函数中定义响应式状态。在 'setup' 函数中，可以使用 'ref' 函数来创建一个响应式引用，并将其返回给模板。这样，模板中就可以直接使用该响应式引用了。

以下是一个示例：

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    return {
      count
    };
  }
}

在模板中，可以直接使用 'count'：

<template>
  <div>{{ count }}</div>
  <button @click="count++">Increment</button>
</template>

使用 'ref' 创建的响应式引用是单个值的响应式，如果需要创建一个包含多个属性的响应式对象，可以使用 'reactive' 函数。'reactive' 函数接收一个普通对象，并返回一个响应式代理对象。

以下是一个使用 'reactive' 的示例：

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      message: 'Hello Vue 3'
    });

    return {
      state
    };
  }
}

在模板中，可以直接使用 'state' 对象的属性：

<template>
  <div>{{ state.count }}</div>
  <div>{{ state.message }}</div>
  <button @click="state.count++">Increment</button>
</template>

通过使用 Composition API 和 'setup' 函数，在 Vue 3 中可以更方便地定义和使用响应式状态，避免了重复引入 'ref' 和 'reactive' 的问题。