vue3中的ref

在 Vue3 中，`ref` 是一个新的响应式 API，它用来创建一个响应式的数据对象。与 Vue2 中的 `data` 不同，`ref` 返回的是一个包含单个值的引用对象，而不是一个普通的 JavaScript 对象。

使用 `ref` 创建一个响应式的数据对象非常简单，只需要将初始值作为参数传递给 `ref` 函数即可，如下所示：

import { ref } from 'vue'

const count = ref(0)

在组件模板中使用 `count` 变量时，可以像使用普通的 JavaScript 变量一样使用它，但是 `count` 是一个响应式的对象，在组件内部数据发生改变时，模板会自动更新。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="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` 创建的响应式对象，在读取和修改值时，需要使用 `.value` 属性来访问。