vue3 ref

在 Vue 3 中，`ref` 是一个新的函数式 API，用于创建响应式的数据引用。`ref` 接收一个初始值作为参数，并返回一个对象，该对象包含一个 `value` 属性，该属性指向初始值。

例如，创建一个数值类型的引用：

import { ref } from 'vue'

const count = ref(0)

在模板中使用 `count` 引用：

<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)

      const increment = () => {
        count.value++
      }

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

在上面的例子中，我们使用 `ref` 创建了一个名为 `count` 的响应式数据引用，并在模板和 `setup()` 函数中使用它。注意，在 `setup()` 函数中，我们需要通过 `count.value` 来访问引用的值，而不是直接使用 `count`。