Vue3 v-model 双向绑定

**Vue3 v-model 双向绑定**

在 Vue2 中，v-model 是一个非常强大的指令，它可以实现双向数据绑定。然而，在 Vue3 中，v-model 的行为有所不同。下面我们将详细介绍 Vue3 中的 v-model 双向绑定。

**什么是双向绑定**

双向绑定是一种数据同步机制，它允许视图层和模型层之间的数据保持一致。在 Vue2 中，v-model 就是实现这种双向绑定的关键指令。它可以让用户输入的值自动更新到对应的数据源中。

**Vue3 中的 v-model**

在 Vue3 中，v-model 的行为有所不同。虽然它仍然可以实现双向数据绑定，但是它不再是一个内置的指令，而是一个独立的 API。也就是说，你需要手动使用这个 API 来实现双向绑定。

**如何使用 v-model**

要在 Vue3 中使用 v-model，首先你需要定义一个数据源，然后使用 `v-model` API 来绑定该数据源到你的视图组件中。

html<template>
 <input v-model="name" type="text">
</template>

<script>
export default {
 data() {
 return {
 name: ''
 }
 }
}
</script>

在上面的例子中，我们定义了一个 `name` 数据源，然后使用 `v-model` API 来绑定该数据源到我们的视图组件中的 `` 元素。

**如何实现双向绑定**

要实现双向绑定，你需要在你的视图组件中使用 `watch` API 来监听数据源的变化，并且在数据源发生变化时更新你的视图组件。

html<template>
 <div>
 {{ name }}
 <input v-model="name" type="text">
 </div>
</template>

<script>
export default {
 data() {
 return {
 name: ''
 }
 },
 watch: {
 name(val) {
 console.log('数据源发生变化：', val)
 }
 }
}
</script>

在上面的例子中，我们使用 `watch` API 来监听 `name` 数据源的变化，并且在数据源发生变化时更新我们的视图组件。

**如何实现更复杂的双向绑定**

如果你需要实现更复杂的双向绑定，比如说，你需要同时绑定多个数据源到你的视图组件中，那么你可以使用 `computed` API 来实现。

html<template>
 <div>
 {{ name }} - {{ age }}
 <input v-model="name" type="text">
 <input v-model="age" type="number">
 </div>
</template>

<script>
export default {
 data() {
 return {
 name: '',
 age: ''
 }
 },
 computed: {
 fullName() {
 return this.name + ' - ' + this.age }
 }
}
</script>

在上面的例子中，我们使用 `computed` API 来实现一个计算属性 `fullName`，它同时依赖于 `name` 和 `age` 数据源。

**总结**

Vue3 中的 v-model 双向绑定虽然有所不同，但是仍然可以实现双向数据绑定。通过手动使用 `v-model` API 和 `watch` API，你可以实现简单到复杂的双向绑定。