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

单向绑定 vs 双向绑定

单双向绑定，指的是View层和Model层之间的映射关系。

react采取单向绑定，如图所示：

https://upload-images.jianshu.io/upload_images/20026007-2c3369bab52b6d2e.png

用户访问View，用户发出交互到Actions中进行处理，Actions中通过setState对State进行更新，State更新后触发View更新。可以看出，View层不能直接修改State，必须要通过Actions来进行操作，这样更加清晰可控

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

• 单向绑定：插值形式{{data}}，v-bind也是单向绑定
• 双向绑定：表单的v-model，用户对View层的更改会直接同步到Model层

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

单向数据流 vs 双向数据流

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

vue和react仅单向数据流

虽然vue有双向绑定v-model，但是vue和react父子组件之间数据传递，仍然还是遵循单向数据流的，父组件可以向子组件传递props，但是子组件不能修改父组件传递来的props，子组件只能通过事件通知父组件进行数据更改，如图所示：

https://upload-images.jianshu.io/upload_images/20026007-914981455efc46de.png?imageMogr2/auto-orient/strip|imageView2/2/w/386/format/webp

优点是所有状态的改变可记录、可跟踪，源头易追溯; 所有数据只有一份，组件数据只有唯一的入口和出口，使得程序更直观更容易理解，有利于应用的可维护性

angularJs可以双向数据流

相比之下，元老级框架AngularJS却不一样，它允许在子组件中直接更新父组件的值

数据流与绑定

准确来说两者并不是一回事。单向数据流也可有双向绑定，双向数据流也可以 有双向绑定
但是很多资料混为一谈

https://upload-images.jianshu.io/upload_images/20026007-f517bdcaa8f0c3f4.png?imageMogr2/auto-orient/strip|imageView2/2/format/webp