[JavaScript知识库].sync和v-model的使用与区别

.v-model

如下：代码1 就是? 代码2的语法糖? ? 代码2就是代码1的完整写法

<model v-model="b"></model>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?代码1

?等价于

<model :value='b' @input="val=>num=val"></model>? ? ? ? ? ? ? ? ? ? ? ? ? ? 代码

vue.sync

如下：代码1 就是? 代码2的语法糖? ? 代码2就是代码1的完整写法

<son :a.sync='num' ></son>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 代码1

等价于

<son :a='num' @update:a='val=>num=val'></son>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?代码2

?vue.sync的执行步骤与vue.v-model是一样的参考第一张图

.sync与.v-model区别

• 相同点：都是语法糖，都可以实现父子组件中的数据的双向通信。
• 区别点:

  • 格式不同。 v-model="num", :num.sync="num"

  • v-model： @input + value

  • :num.sync: @update:num

  • v-model只能用一次；.sync可以有多个。