浅谈vue与react的数据流与数据绑定

数据流

所谓数据流，就是指的是组件之间的数据流动。

数据绑定

所谓数据绑定，就是Model层与View层的映射关系。
单向数据绑定：Model的更新会触发View的更新，而View的更新不会触发Model的更新，它们的作用是单向的。
单向数绑定的优缺点：
优点：所有状态变化都可以被记录、跟踪，状态变化通过手动调用触发，源头易追溯。
缺点：会有很多类似的样板代码，代码量会相应的上升。
双向数据绑定的优缺点：
双向数据绑定：Model的更新会触发View的更新，View的更新也会触发Model的更新，它们的作用是相互的。
优点：在操作表单时使用v-model方便简单，可以省略繁琐或重复的onChange事件去处理每个表单数据的变化（减少代码量）。
缺点：属于暗箱操作，无法很好的追踪双向绑定的数据的变化。

vue数据流与绑定

在vue中，父组件使用props将值传递给子组件后，子组件并不能直接修改从父组件传递过来的值，而是通过$emit去通知父组件进行修改。所以vue是属于单项数据流的。
vue一般使用单向绑定：插值形式{{data}}，v-bind也是单向绑定
vue中也存在双向绑定：v-model。所存在的双向绑定v-model只不过是v-bind:value 和 v-on:input的语法糖

第一行的代码其实只是第二行的语法糖。input 元素本身有个 oninput事件，这是 HTML5 新增加的，类似 onchange，每当输入框内容发生变化，就会触发 oninput

react数据流与绑定

而在react里，数据流同样是单项传递的。父组件将值传给子组件，但子组件不能修改父组件的值。（想想看，父组件的值可能并不只用于这一个子组件，一旦能修改，所有使用改数据的组件都会发生变化，那么是谁对数据进行了更改呢？）子组件想要修改父组件的值，只能通过调用父组件传递过来的方法，从而将值传递给父组件，让父组件进行修改。当然react也考虑到当项目过于庞大，组件层级过高时，这样只能从props一层层向下传递是相当让人头疼的。于是加上了context这个玩意，方便我们进行组件间的隔代通信。

**总结: ** vue与react都是属于单项数据流的，并且都可以实现单项数据绑定与双向数据绑定