Vue系列 =>双向绑定和单向数据流并不冲突

双向绑定，从字面上来看我的理解就是通过数据关联的双方总是体现出同步的状态。

看下图： 一提到vue，或者我们在接触vue相关的问题的时候，总是会被问到

vue的双向绑定的原理是什么，或者说它是怎么做到双向绑定的。它又为什么会被设计成单向数据流？

这里我们要记住一点，Vue是单项数据流，不是双向绑定。Vue所体现的双向绑定是一种语法糖。

Object.defineProperty是用来做响应式更新的，你要说它就是双向绑定，我觉得这是不正确的。

v-model实现双向绑定、事件回调实现、.sync实现

直接贴代码，我们来看看他们具体是怎么实现的

index.vue页面

<template> <div> <PersonalInfo v-model="phoneInfo" :zip-code.sync="zipCode" /> <PersonalInfo :phone-info="phoneInfo" :zip-code="zipCode" @change="val => (phoneInfo = val)" @update:zipCode="val => (zipCode = val)" /> phoneInfo： {{ phoneInfo }} <br /> zipCode： {{ zipCode }} </div> </template> <script> import PersonalInfo from '../components/personalinfo/index.vue' export default { components: { PersonalInfo }, data () { return { phoneInfo: { areaCode: '+86', phone: '' }, zipCode: '' } } } </script>

组件代码

<template> <div> <select :value="phoneInfo.areaCode" placeholder="区号" @change="handleAreaCodeChange" > <option value="+86">+86</option> <option value="+60">+60</option> </select> <input :value="phoneInfo.phone" type="number" placeholder="手机号" @input="handlePhoneChange" /> <input :value="zipCode" type="number" placeholder="邮编" @input="handleZipCodeChange" /> </div> </template> <script> export default { name: 'PersonalInfo', model: { prop: 'phoneInfo', // 默认 value event: 'change' // 默认 input }, props: { phoneInfo: Object, zipCode: String }, methods: { handleAreaCodeChange (e) { this.$emit('change', { ...this.phoneInfo, areaCode: e.target.value }) }, handlePhoneChange (e) { this.$emit('change', { ...this.phoneInfo, phone: e.target.value }) }, handleZipCodeChange (e) { this.$emit('update:zipCode', e.target.value) } } } </script>