Vue 的单项数据流

什么是单向数据流？

单向数据流指只能从一个方向来修改状态。

与单向数据流对对应的是双向数据流（也叫双向绑定）。在双向数据流中，Model（可以理解为状态的集合） 中可以修改自己或其他Model的状态， 用户的操作（如在输入框中输入内容）也可以修改状态。这使改变一个状态有可能会触发一连串的状态的变化

与双向数据流比，在单向数据流中，当你需要修改状态，完全重新开始走一个修改的流程。这限制了状态修改的方式，让状态变得可预测，容易调试。

示例

在data中声明的属性会通过Object.definePropty方法为其添加get和set方法，使其成为响应式数据。

子组件

父组件

子组件中的currentValue是实际input组件的值，他的值是根据父组件传入的值得出的，input标签组件的change事件来触发父组件的change事件，从而改变传入子组件props中value的值。这就解释了单项数据流，父組件通过props向子组件传递值，子组件通过emit事件来通知父组件修改值，子组件不在自身对父组件传递过来的props做任何修改，都是通过父组件来更新props,从而达到子组件更新自身状态。

使用场景

当我们在实现一个由数据渲染的复杂表单时，那么我们的设计就可以采用这种模式，通过props以及emit传递,保证子组件的事件触发根节点的数据更新，从而更新子孙组件的状态。