引入ref vue3

在Vue 3中，使用`ref`函数来创建一个响应式的数据引用。`ref`函数接受一个初始值作为参数，并返回一个包含响应式数据的引用对象。

使用`ref`函数创建的引用对象可以直接在模板中使用，也可以通过`.value`属性访问和修改其值。当引用对象的值发生变化时，相关的视图会自动更新。

下面是一个使用`ref`的简单示例：

import { ref } from 'vue';

// 创建一个响应式的引用对象
const count = ref(0);

// 在模板中使用引用对象
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

// 在组件中使用引用对象
export default {
  setup() {
    const increment = () => {
      count.value++; // 修改引用对象的值
    };

    return {
      count,
      increment
    };
  }
}

在上面的示例中，`count`是一个响应式的引用对象，可以直接在模板中使用。同时，通过`increment`函数可以修改`count.value`的值。

需要注意的是，在Vue 3中，由于使用了Composition API，建议在`setup`函数中进行引入和使用`ref`。