什么是双向绑定
数据model的更新会触发view的更新，view的更新相同也会触发model的更新
什么是单向数据流
model会触发view的更新，view的更新不会触发model的更新
双向绑定 or 单向数据流
Vue是单向数据流，不是双向绑定
Vue的双向绑定不过是语法糖而已
Object.defineProperty是用来做响应式更新的，和双向绑定没有任何关系
实现双向绑定之方法
1、v-model
父组件引用子组件实现双向绑定
// 父组件 <PersonalInfo v-model="phoneInfo" />// 子组件 template <div> 手机号 <input :value="phoneInfo.phone" type="number" placeholder="请输入手机号" @input="handlePhoneChange" /> </div><script>// 子组件 model: { prop: "phoneInfo", // 默认 value event: "change" // 默认 input }, props: { phoneInfo: { type: Object, default () { return {} } } }, methods: { handlePhoneChange(e) { this.$emit("change", { ...this.phoneInfo, phone: e.target.value }); } }子组件的input默认事件是input,但定义的handlePhoneChange是change事件，那是因为子组件在model中声明属性phoneInfo的事件为change。
2、父组件传递数据给子组件，子组件通过$emit触发自定义事件传值
// 父组件<PersonalInfo :phone-info="phoneInfo" @change="val => (phoneInfo = val)"/>子组件通过$emit事件，把value 传递给父组件，父组件自主给phoneInfo重新赋值
3、.sync 修饰符
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。
// 父组件传递zipCode给子组件（语法糖）<PersonalInfo :zip-code.sync="zipCode"/>// 子组件通过inputhandleZipCodeChange(e) { this.$emit("update:zipCode", e.target.value);}