vue3 中ref使用

在 Vue 3 中，`ref` 是一个新的响应式 API，用于创建一个响应式的数据引用。使用 `ref` 创建的数据可以在模板中直接使用，也可以在 JavaScript 中通过 `.value` 属性进行访问和修改。

以下是一个示例：

<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` 的响应式数据引用，并在 `setup` 函数中返回了 `count` 和 `increment` 函数。在模板中，我们直接使用 `count` 变量来显示计数器的值，并在按钮的点击事件中调用 `increment` 函数来增加计数器的值。

注意，在 JavaScript 中访问 `ref` 创建的数据时，需要使用 `.value` 属性。例如，我们在 `increment` 函数中对 `count` 变量进行操作时，需要使用 `count.value++` 的形式。