vue3双向数据绑定

在 Vue 3 中，双向数据绑定的原理与 Vue 2 是有所不同的。Vue 3 使用了 Composition API，其中的双向数据绑定是通过 `v-model` 指令的新实现方式来实现的。

在 Vue 3 中，`v-model` 依然可以用于表单元素的双向数据绑定，但它的实现原理与 Vue 2 有所不同。在 Vue 3 中，`v-model` 使用了 `v-bind` 和 `v-on` 的组合来实现双向数据绑定。具体原理如下：

1. `v-model` 绑定的值会通过 `v-bind` 绑定到表单元素的 `value` 属性上，从数据模型传递到视图。

2. 同时，`v-model` 也会监听表单元素的 `input` 事件（或其他指定的事件），通过 `v-on` 绑定一个事件监听器，当用户在表单元素中输入内容时，触发相应的事件。

3. 当用户输入内容时，`v-on` 绑定的事件监听器会将输入的值反馈回 Vue 实例中的数据模型。

简而言之，Vue 3 中的 `v-model` 实际上是用了组合了 `v-bind` 和 `v-on` 来实现双向数据绑定，而不再是 Vue 2 中直接实现的双向数据绑定。

以下是一个 Vue 3 中使用 `v-model` 的示例：

HTML 代码：

```html
<div id="app">
  <input type="text" v-model="message">
  <p>{{ message }}</p>
</div>
```

Vue 实例：

```javascript
const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue 3'
    };
  }
});
app.mount('#app');
```

在这个示例中，我们创建了一个 Vue 3 实例，并将其绑定到 id 为 `app` 的 DOM 元素上。在 HTML 中，我们使用 `v-model` 将 `input` 元素的值绑定到 Vue 实例的 `message` 数据属性上，并在 `p` 元素中展示 `message` 的内容。

当我们在输入框中输入内容时，`message` 数据会自动更新，并且 `p` 元素中展示的内容也会随之更新，实现了双向数据绑定。