vue2和3的v-model实现原理

Vue 2和Vue 3中的v-model指令的实现原理有一些不同。

在Vue 2中，v-model是一个语法糖，实质上是通过props和events来实现双向绑定。当使用v-model指令时，Vue会将v-model的值作为prop传递给子组件，并且在子组件中通过$emit方法触发一个名为"input"的自定义事件来更新父组件中的数据。

示例代码如下：

<template>
  <div>
    <input :value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>

<script>
export default {
  props: ['value'],
}
</script>

在Vue 3中，v-model的实现方式有所改变。Vue 3通过新的v-model指令实现了更灵活的双向绑定。它允许我们通过自定义指令来控制属性和事件的绑定方式。

示例代码如下：

<template>
  <div>
    <input v-bind:value="value" v-on:input="updateValue($event.target.value)">
  </div>
</template>

<script>
export default {
  setup() {
    const value = Vue.ref('');

    function updateValue(newValue) {
      value.value = newValue;
    }

    return {
      value,
      updateValue,
    }
  }
}
</script>

在Vue 3中，我们通过`setup`函数来定义组件的逻辑。`value`是通过`Vue.ref`创建的响应式数据，`updateValue`函数用于更新`value`的值。

总结来说，Vue 2中的v-model是基于props和events的双向绑定，而Vue 3中的v-model通过自定义指令和响应式数据来实现双向绑定。