浅出理解Vue中的sync修饰符

0. 前言

sync修饰符能干的，v-model基本上都能干；
可以将sync认为是句法糖(syntatic sugar)。

注：syntatic sugar的中文对应词是“语法糖”。但笔者认为, syntatic的英文意思其实是句法的形容词，而语法糖本意是编程语句中的便捷写法；再者，语法是个大概念，不只有句法，还有词法、文法等。所以笔者认为翻译成句法糖更合适。

1. 官方文档阅读

<!---完全照抄官方代码--->
<text-document 
    v-bind:title="doc.title" 
    v-on:update:title="doc.title = $event" >
</text-document>

上面的Vue代码可用sync改写如下：

<!---全部使用句法糖--->
<text-document
    :title.sync="doc.title">
</text-document>

综上，我们可以把.sync这一句法糖拆解为：

v-bind一个data
v-on:update该属性

直接总结为公式，即为（v-bind与v-on采用句法糖:与@简写）：

:prperty.sync === :prperty + @update="property = $event"

2. 深入理解sync的作用

官方文档摘录如下：

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。

那么，何为双向绑定呢？双向即为Model和View互相绑定，即“你爱我，我爱你，蜜雪冰城甜蜜蜜”。

再看一个例子。感谢深入理解vue 修饰符sync【 vue sync修饰符示例】 - 简书 (jianshu.com)博客文章的原作者。

<template>
    <div class="details">
        <myComponent :show.sync='valueChild' 
        style=
            "padding: 30px 20px 30px 5px;
            border:1px solid #ddd;
            margin-bottom: 10px;"
        ></myComponent>
        <button @click="changeValue">toggle</button>
    </div>
</template>

<script>
import Vue from 'vue';

Vue.component('myComponent', {
      template: `<div v-if="show">
                    <p>默认初始值是{{show}}，所以是显示的</p>
                    <button @click.stop="closeDiv">关闭</button>
                 </div>`,
      props:['show'],
      methods: {
        closeDiv() {
          this.$emit('update:show', false); //触发 input 事件，并传入新值
        }
      }
});

export default{
    data(){
        return {
            valueChild:true,
        };
    },
    methods:{
        changeValue(){
            this.valueChild = !this.valueChild;
        }
    }
}
</script>

从实践效果上来看，指的是myComponent显示开关随着valueChild值的改变，不过是将v-bind与v-on:update合二为一的结果。

3. 后记

v-model也可实现相同功能，能写v-model就写v-model。