vue3ref

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

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

// 创建一个 Vue 应用
const app = createApp({
  setup() {
    // 使用 ref 创建一个响应式的计数器变量
    const count = ref(0);

    // 返回一个对象，将 ref 包装的变量暴露给模板
    return {
      count,
      // 定义一个方法来增加计数器的值
      increment: () => {
        count.value++;
      }
    };
  }
});

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

解释说明：

1. 引入 Vue 和相关函数：我们首先从 Vue 库中导入 createApp 和 ref 函数。
2. 创建 Vue 应用：使用 createApp 创建一个新的 Vue 应用实例。
3. 使用 ref 创建响应式数据：在 setup 函数中，使用 ref 创建了一个名为 count 的响应式变量，初始值为 0。
4. 返回响应式数据和方法：在 setup 函数中返回一个对象，包含 count 和一个用于增加计数器的方法 increment。
5. 挂载应用：最后，使用 app.mount('#app') 将应用挂载到 HTML 中的 #app 元素上。

这样，当我们在模板中使用 count 或调用 increment 方法时，Vue 会自动更新页面上的显示内容。