vue2和3的双向绑定

Vue.js 的双向数据绑定是一种核心特性，它使得视图层的数据自动保持与模型层数据的一致。在 Vue 2.x 和 3.x 中，双向绑定主要通过 `v-model` 指令实现：

**Vue 2.x**：
在 Vue 2 中，`v-model` 是一种简化的语法糖，底层实际上是基于 `data` 对象的属性劫持（Watcher）。当你修改 `v-model` 绑定的值时，Vue 会自动更新视图；反之，用户在输入框等组件上交互时，Vue 也能实时更新数据。

<input v-model="message">

在这个例子中，`message` 数据的变化会同步到输入框的内容，反之亦然。

**Vue 3.x**：
Vue 3 引入了新的响应式系统，包括计算属性、Ref 和 Proxy，使得双向绑定更为高效。`v-model` 现在推荐拆分成 `modelValue` 和 `input` 事件处理：

<template>
  <input :value="modelValue" @input="handleInput">
</template>

<script>
export default {
  data() {
    return { modelValue: '' };
  },
  methods: {
    handleInput(event) {
      this.modelValue = event.target.value;
    }
  }
};
</script>

这里使用了 `:value` 和 `@input` 分别表示数据绑定和事件监听，而不是直接使用 `v-model`。