双向绑定和单向数据流
什么是双向绑定？
双向绑定指的是：数据model的更新会触发可视层的更新，而可视层的更新会触发数据model的更新。
这就是v-model绑定input元素所做的事情。
单向数据流
单向数据流：数据model的更新触发可视层的更新，而可视层的更新和model不会有任何关系。
vue的几个概念
- vue是单向数据流，不是双向绑定
- vue的双向绑定不过是语法糖
- Object.defineProperty是用来做响应式更新的，和双向绑定没有关系。
v-model做了什么
v-model默认限制只能用在：input、select、textarea、components
也就是除了表单元素，还有可以用在组件上。
v-model实际上做了两件事：
- 默认绑定value属性
- 创建一个input事件，用于更新value
<input v-model="value" />
可以看成是
<input :value="value" @input="val=> (value=val)" />
vue会自动创建一个事件通过事件回调的方式更新数据，这就是所谓的双向绑定。
组件中的v-model
组件A
<template>
<div>
<select :value="phoneInfo" placeholder="区号"
@change="handleAreaCodeChange">
<option value="+86">+86</option>
<option value="+60">+60</option>
</select>
</div>
</template>
<script>
export default {
model: {
prop: "phoneInfo", // 默认 value
event: "change" // 默认 input
},
props:{
phoneInfo: String,
},
methods:{
handleAreaCodeChange(e){
this.$emit("change",e.target.value)
}
}
}
</script>
调用组件
<template>
<a v-modal="value" />
</template>
可以看到组件上有一个model属性，他是一个对象，有两个属性：
- prop：表示要v-model默认要绑定的属性名，属性是props设置的，但是因为用了v-model，所以不用显式写出来
- event：表示v-model默认生成什么自定义事件来触发更新，比如我设置一个
event:"aabbccc"，那么如果我要更新这个v-model绑定的数据，必须要emit触发这个指定的事件this.$emit("aabbcc",参数)
这样的话我们可以在自定义的任何函数里进行更新了，不必局限于元素给定的事件方法。
事实上model是有默认值的：
export default {
model:{
prop:"value",
event:"input"
}
}
默认情况下model的prop指向的是value属性，这个value可以是props中设置的value，也可以data中的value，反正这个value是this上下文可以获取到的。甚至绑定在input元素上，value就是value属性。
event默认是input，表示input事件触发，这个input就是input元素的input事件。
所以，如果我们想省点事，我们可以直接给组件使用v-model双向绑定一个值，然后在组件内，通过props的value接收传递过来的数据，然后再通过$emit("input","xxxx")来触发更新。
当然，为了更好的语义化，我建议是在model中自定义一下，取一个合理的事件名，绑定到合理的数据名称上。
sync修饰符
v-model很好用，因为他缩减了我们书写的代码量，如果让你手动写一个事件更新的函数，那肯定头大，但是一个组件往往只能拥有一个v-model，所以，出现了sync修饰符。
sync就不多说了，本博客搜索sync就可以找到对应的文章。
sync实际上就是v-model的一个另一种存在形式，他的原理和v-model完全是相同的。
