vue3 数据双向绑定

在 Vue3 中，双向数据绑定仍然可以使用 v-model 指令来实现。但是，Vue3 中的双向数据绑定和 Vue2 中有所不同，Vue3 中的双向数据绑定是通过使用新的 v-model 指令和 setup 函数中的 ref 和 reactive 实现的。

具体实现方法如下：

1. 在模板中使用 v-model 指令绑定数据，例如：

   <input v-model="name" />

2. 在 setup 函数中使用 ref 和 reactive 函数来创建响应式数据，例如：

   import { ref, reactive } from 'vue'

   export default {
     setup() {
       const name = ref('')
       const user = reactive({
         name: name,
       })

       return {
         user,
       }
     },
   }

在上面的代码中，我们使用 ref 函数来创建一个 name 变量，并将其初始值设置为空字符串。然后，我们使用 reactive 函数创建一个 user 对象，并将 name 变量作为其中一个属性的值。

3. 最后，在模板中使用 user.name 来绑定数据，例如：

   <input v-model="user.name" />

这样，当用户输入内容时，name 变量和 user 对象中的 name 属性都会自动更新，实现了双向数据绑定。