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


看到网上很多人讨论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 会在浏览器的控制台中发出警告。

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM