Vue2中v-model和.sync修饰符的实现原理及区别

引言

  Vue2中实现双向数据绑定的方式有两种，一个是v-model，一个是.sync修饰符。它们的区别是一个标签或者组件上，v-model只能使用一次，而.sync修饰符可以使用多次。下面我将通过介绍它们的实现原理来让大家了解它们的区别。

一、v-model

v-model的实现原理：
  1.v-model用在标签上：v-bind:value与data中定义的一个变量，然后v-on:input事件，事件处理函数中修改属性绑定的data中的变量，使这个变量的值等于当前标签的value的值。
  2.v-model用在组件上：v-bind:value与data中定义的一个变量，然后v-on:input事件，事件处理函数中修改属性绑定的data中的变量，使这个变量的值等于子组件使用$emit传递过来的值。

下面我将以v-model在组件上的应用为例展示v-model的实现原理：
父组件：

<template>
  <div id="app">
    <my-com-model v-model="num"></my-com-model>
    <hr>
    <!-- v-model="num" 等价于 :value="num" @input="val => num = val" -->
    <my-com-model :value="num" @input="val => num = val"></my-com-model>
  </div>
</template>

<script>
import MyComModel from './components/MyComModel.vue'
export default {
  components: { MyComModel },
  data() {
    return {
      num : 0
    }
  }
}
</script>

子组件：

<template>
  <div>
    <p>我是model子组件: {{ value }}</p>
    <button @click="$emit('input', value + 1)">value+1</button>
  </div>
</template>

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

程序运行结果:

二、修饰符.sync

.sync的实现原理：
修饰符.sync用在组件上：v-bind:一个自定义属性与data中定义的一个变量，然后v-on:一个名为“update:自定义属性”的自定义事件，事件处理函数中修改属性绑定的data中的变量，使这个变量的值等于子组件使用$emit传递过来的值。

下面我将以修饰符.sync在组件上的应用为例展示.sync的实现原理：
父组件：

<template>
  <div id="app">
    <my-com-sync :num1.sync="num1" :num2.sync="num2"></my-com-sync>
    <hr>
    <my-com-sync 
      :num1="num1" 
      @update:num1="val => num1 = val" 
      :num2="num2" 
      @update:num2="val => num2 = val"
    ></my-com-sync>
  </div>
</template>

<script>
import MyComSync from './components/MyComSync.vue'
export default {
  components: { MyComSync },
  data() {
    return {
      num1: 0,
      num2: 100
    }
  }
}
</script>

子组件:

<template>
  <div>
    <p>我是sync子组件: {{ num1 }}</p>
    <p>我是sync子组件: {{ num2 }}</p>
    <button @click="$emit('update:num1', num1 + 1)">num1</button>
    <button @click="$emit('update:num2', num2 + 1)">num2</button>
  </div>
</template>

<script>
export default {
  props: ["num1", "num2"]
}
</script>

程序运行结果:

三、总结

  从上面实现v-model和修饰符.sync的代码中可以看出，它们两个的实现原理几乎一样，只是v-model的属性绑定和事件绑定分别是两个固定的属性和事件，不能更改，因此一个标签或者组件上只能使用一次v-model；而修饰符.sync的属性绑定和事件绑定都绑定不是固定属性或者事件，因此一个标签或者组件上可以多次使用修饰符.sync。
  值得一提的是，vue3中取消了修饰符.sync，并且把.sync的功能合并到了v-model上。