vue是单项数据流。虽然vue有双向绑定“v-model”,但是vue父子组件之间数据传递,仍然还是遵循单向数据流的,父组件可以向子组件传递props,但是子组件不能修改父组件传递来的props,子组件只能通过事件通知父组件进行数据更改。

本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。
双向绑定
简而言之,双向绑定就是model的更新会触发view的更新,view的更新会触发model的更新,它们的作用是相互的
[图片上传失败...(image-81a06f-1556975918443)]
单向数据流
简而言之,单向数据流就是model的更新会触发view的更新,view的更新不会触发model的更新,它们的作用是单向的

立即学习“前端免费学习笔记(深入)”;
这不是废话吗,谁都知道的
下面就是真正的干货了,板凳坐好
- Vue是单向数据流,不是双向绑定
- Vue的双向绑定不过是语法糖
- Object.definePropert是用来做响应式更新的
v-model的实现原理
- 放在组件上
父组件
子组件
父组件的写法等同于
华友协同办公自动化OA系统下载华友协同办公管理系统(华友OA),基于微软最新的.net 2.0平台和SQL Server数据库,集成强大的Ajax技术,采用多层分布式架构,实现统一办公平台,功能强大、价格便宜,是适用于企事业单位的通用型网络协同办公系统。 系统秉承协同办公的思想,集成即时通讯、日记管理、通知管理、邮件管理、新闻、考勤管理、短信管理、个人文件柜、日程安排、工作计划、工作日清、通讯录、公文流转、论坛、在线调查、
(phoneInfo = val)" :zip-code="zipCode" @update:zipCode="val => (zipCode = val)"/>
- 放在input元素上
其实上文已经体现了
{ PhoneInfo.phone = val }"以上两句是相等的
TIPS
model 2.2.0+
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event,但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。
.sync修饰符 2.3.0+
在有些情况下,我们可能需要对一个 prop 进行“双向绑定”。不幸的是,真正的双向绑定会带来维护上的问题,因为子组件可以修改父组件,且在父组件和子组件都没有明显的改动来源。
总结
所以说呢, vue还是单向数据流,v-model只不过是语法糖,它是
:value="sth"和@change="val => sth = val"的简写形式。我们通常在面试当中被提问,Vue是怎么实现数据响应式更新的,面试官期望听到的回答是通过Object.defineProperty()的get和set方法来实现响应式更新。v-model和.sync修饰符分别在组件单个属性、多个属性需要双向绑定下使用,这是二者使用的场景
相关推荐:《vue.js教程》










