Vue 2.x 与 Vue 3.x 实现自定义输入组件（自定义 v-model）的区别

Vue2.x 之中，实现自定义 v-model

  // CheckComponent.vue

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

  <script>
    export default {
      name: 'InputComponent',
      mode: {
        prop: 'value',
        event: 'change'
      }
      props: {
        value: {
          required: true
        }
      }
    }
  </script>

  // ParentComponent.vue

  <template>
    <CheckComponent v-model="variable">
  </template>

Vue 3.x 之中，实现自定义 v-model，且去掉 sync 修饰符的概念

  // CheckComponent.vue

  <template>
    <input type="checkbox" :value="modelValue" @change="$emit('update:modelValue', $event.target.value)" >
  </template>

  <script>
    export default {
      props: {
        modelValue: {
          required: true
        }
      }
    }
  </script>


  // ParentComponent.vue

  <template>
    <CheckboxComponent v-model="variable" >
  </template>

结果来看，首先代码量上减少了很多，而且不再使用 model 的一个概念，减轻了一定的心智负担，而且还有很多 Vue 3的新特性显示了这类的优点，日后继续详谈。