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++
    }

    // 返回需要在模板中使用的变量和方法
    return {
      count,
      increment
    }
  }
})

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

// 对应的 HTML 可能如下：
// <div id="app">
//   <p>Count: {{ count }}</p>
//   <button @click="increment">Increment</button>
// </div>

解释说明：

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

这样就可以在页面上显示 count 的值，并通过点击按钮来增加它。