首页 > 其他 > 详细

vue 双向数据绑定与单向数据流

时间:2020-06-05 13:22:27      阅读:80      评论:0      收藏:0      [点我收藏+]

看到网上很多人讨论vue是双向数据绑定,怎么又是单向数据流呢? 其实,这两个是不同的概念,双向绑定是model改变view自动更新,view改变model自动更新;而单向数据流指的父组件传值给子组件,子组件不能修改这个值,二父组件修改这个值的话子组件也会受影响,这个影响是单向的,只能从父组件流向子组件,不能反向。

双向数据绑定

 vue支持双向数据绑定和单向数据绑定

单双向绑定,指的是View层和Model层之间的映射关系。
  • 单向绑定:插值形式{{data}},v-bind也是单向绑定
  • 双向绑定:表单的v-model,用户对View层的更改会直接同步到Model层

实际上v-model只是v-bind:value 和 v-on:input的语法糖,我们也可以采取类似react的单向绑定。
vue的v-model在操作表单是,显得很简单,我们不用去写繁琐的onChange事件去处理每个表单数据的变化,但是双向绑定也会导致数据变化不透明,不清晰可控。优点和缺点共存,有时候一个人的优点也是一个人的缺点,道理都是相通的。

react是单向数据绑定

单向数据流

数据流指的是组件之间的数据流动。

react和vue都是单向数据流

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。

额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。

技术分享图片

 

vue 双向数据绑定与单向数据流

原文:https://www.cnblogs.com/xuefang-yang/p/13048510.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!