Vue 3 中组件 ref 的使用指南

在 Vue 3 中，可以使用 'ref' 函数来创建一个响应式的引用。'ref' 函数接受一个参数作为初始值，并返回一个包含 'value' 属性的响应式对象。可以通过操作 'value' 属性来读取或修改引用的值。

下面是一个使用 'ref' 的示例：

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0); // 创建一个引用，初始值为 0
    
    function increment() {
      count.value++; // 修改引用的值
    }
    
    return {
      count,
      increment
    };
  }
}

在上面的示例中，'count' 是一个引用对象，使用 'count.value' 来访问或修改引用的值。'increment' 是一个方法，每次调用会将 'count' 的值增加 1。

在模板中可以通过 'count' 和 'increment' 来使用 'ref' 创建的引用：

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

这样就可以在模板中实时显示和修改引用的值了。