vue彻底理解.sync修饰符实现prop进行父子组件“双向绑定”

假如现在要实现上面的简单计数器，数字是父组件通过prop传入的，希望在子组件按钮上控制递增。似乎很简单，在按钮上绑定个click事件让prop值递增不就好了嘛？
首先需要清楚三件事：
1.prop是单向数据流；
2.vue并不希望和支持我们直接修改传入的prop值，这样打破了prop单向数据流的机制，会造成数据混乱；
3.所以，prop值需要实时更新传入，相当于我们要实现双向数据绑定；

那么，既然是一个需要双向绑定的功能，我们想到的肯定是v-model指令，它跟prop有什么关系？v-model实际上是拆分为两步实现的：
组件内，$emit向上传递数据更新事件附带新值：

props: ["num"]
this.$emit("update: num", num++)

组件上，v-bind绑定prop值，v-on监听数据更新事件：

<i-button
:num="number"
@update:num="number = $event">
</i-button>

于是，后来vue版本更新中推出了.sync异步修饰符，从而简写了上面的功能实现：

<i-button :num.sync="number"></i-button>

props: ["num"]
this.$emit("update: num", num++)

这样，既不会直接修改prop值和违反prop的单向数据流机制，又能获取实时更新的prop数据。