vue2和vue3双向数据绑定有何不同，并举个例子

Vue2和Vue3在双向数据绑定方面有一些不同之处。

在Vue2中，双向数据绑定是通过v-model指令实现的。例如，在一个输入框中使用v-model指令将数据绑定到一个变量上：

<template>
  <input v-model="message" />
  <p>{{ message }}</p>
</template>

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

在这个例子中，输入框中的内容会与`message`变量进行双向绑定，输入的内容会同步更新到`message`变量中，并且`message`变量的改变也会反映到输入框中。

而在Vue3中，双向数据绑定的方式有所改变，v-model指令被拆分成了两个指令：`v-model`和`v-bind`。`v-model`指令用于接收用户输入，并将其绑定到一个变量上，而`v-bind`指令用于将变量的值绑定到元素上。

下面是一个使用Vue3的例子：

<template>
  <input v-bind:value="message" v-on:input="message = $event.target.value" />
  <p>{{ message }}</p>
</template>

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

在这个例子中，通过`v-bind:value`将`message`变量的值绑定到输入框的value属性上，然后通过`v-on:input`监听输入框的input事件，并将用户输入的值赋给`message`变量。

需要注意的是，Vue3中的双向数据绑定更加灵活，可以与其他指令结合使用，例如可以在`v-bind`指令中添加修饰符来控制数据绑定的方式。这样可以更好地适应不同的开发需求。