vue 3 ref用法

在 Vue 3 中，`ref` 是一个新的响应式 API，用于创建一个包装基本类型值的响应式对象。

`ref` 接收一个初始值作为参数，并返回一个响应式对象，该对象具有 `value` 属性，该属性包含初始值。我们可以使用 `.value` 访问或修改这个值。

以下是一个示例：

import { ref } from 'vue';

const count = ref(0);

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

count.value++; // 修改值

console.log(count.value); // 输出 1

我们还可以将 `ref` 作为组件的响应式数据使用。例如：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { ref } from 'vue';

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

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    };
  }
};
</script>

在这个示例中，我们使用 `ref` 创建了一个名为 `count` 的响应式对象，并在组件的模板中使用了它。当用户点击按钮时，我们通过 `increment` 方法来修改 `count` 的值，并触发重新渲染组件。

需要注意的是，当我们在 `setup` 函数中使用 `ref` 创建响应式对象时，我们不需要使用 `.value` 访问或修改它们的值。在模板中，我们可以直接使用 `count` 变量，而不是 `count.value`。

除了 `ref`，Vue 3 还提供了其他用于创建响应式数据的 API，例如 `reactive` 和 `computed`。根据实际需求选择合适的 API 使用即可。