为什么会有 sync 修饰符？

在日常开发中，我们常常会通过父组件向子组件传递参数 prop ，同时我们也希望子组件对传进来的参数进行更多的修改，可我们不能直接在子组件中修改，这会影响数据的统一性，所以我们需要通知父组件，父组件上操作数据，sync 修饰符就是对这一系列操作的简化，下面我们先不用 sync 修饰符来展示这个过程

<div id="app">
    <div>{{bar}}</div>
    <my-comp v-bind:foo="bar" v-on:update:foo="val => bar = val"></my-comp>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.component('my-comp', {
        template: '<div @click="increment">点我+1</div>',
        data: function() {
            return {copyFoo: this.foo}
        },
        props: ['foo'],
        methods: {
            increment: function() {
                this.$emit('update:foo', ++this.copyFoo);
            }
        }
    });
    new Vue({
        el: '#app',
        data: {bar: 0}
    });
</script>

父组件在使用子组件时添加了一些属性，其中

v-bind:foo="bar"

作用是将父组件的 bar 的值传给子组件，子组件用 props 接收

v-on:update:foo="val => bar = val"

v-on 绑定了一个属性，属性的值是 js代码，这个可以被子组件使用 $emit 调用

我们每使用一个这样组件，都需要加上这么长的属性，Vue为了避免我们的重复劳动，将这个过程封装到 sync 修饰符上

<my-comp :foo.sync="bar"></my-comp>

效果和下面是相同的

<my-comp :foo="bar" @update:foo="val => bar = val"></my-comp>