vue3 ref

// 使用 Vue 3 的 ref 创建响应式数据

// 引入 Vue 和 ref 函数
import { createApp, ref } from 'vue';

// 创建一个 Vue 应用
const app = createApp({
  setup() {
    // 使用 ref 创建一个响应式的变量 count，初始值为 0
    const count = ref(0);

    // 定义一个方法来增加 count 的值
    const increment = () => {
      count.value++; // 注意：访问和修改 ref 的值需要使用 .value
    };

    // 返回这些变量和方法，以便在模板中使用
    return {
      count,
      increment
    };
  }
});

// 挂载应用到 DOM 中的 #app 元素上
app.mount('#app');

解释说明：

1. 引入 Vue 和 ref：首先我们需要从 Vue 中引入 createApp 和 ref。
2. 创建应用：使用 createApp 创建一个新的 Vue 应用实例。
3. 定义响应式数据：在 setup 函数中，使用 ref 创建一个名为 count 的响应式变量，初始值为 0。
4. 定义方法：定义了一个 increment 方法来增加 count 的值。注意，访问和修改 ref 的值时需要使用 .value。
5. 返回数据和方法：将 count 和 increment 方法返回，以便它们可以在模板中使用。
6. 挂载应用：最后，使用 app.mount('#app') 将应用挂载到 DOM 中的 #app 元素上。

这样，你就可以在你的 Vue 3 项目中使用 ref 来创建和管理响应式数据了。