数据流:组件之间的数据流动
数据流指的是组件之间的数据流动。
Vue在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。
也就是说:数据总是从父组件传到子组件。
官方解释:所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外变更父级组件的状态,从而导致你的应用的数据流向难以理解。
额外的,每次父级组件发生变更时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了,Vue 会在浏览器的控制台中发出警告。官方推荐的做法是让子组件抛出事件,通知父组件自行改变绑定的值。
Vue与React一样都是单向数据流的模型,虽然vue有双向绑定v-model,但是vue和react父子组件之间数据传递,仍然还是遵循单向数据流的,父组件可以向子组件传递props,但是子组件不能修改父组件传递来的props,子组件只能通过事件通知父组件进行数据更改。
通过单向数据流的模型,所有状态的改变可记录、可跟踪,相比于双向数据流可加容易维护与定位问题。
单向数据流:总结起来其实也就8个字:数据向下,事件向上。

为何Vue支持通过v-model实现双向数据绑定?
双向数据绑定指的是单纯的数据与视图层之间的绑定。实际上v-model只是v-bind:value 和 v-on:input的语法糖。
<input v-model=“name”/>
//在组件中使用时,实际相当于下面的简写
<input :value="name" @input="val => { name = val }"
这也就说,为什么说v-model不是真正的双向数据流了。
数据绑定是View与Model之间的映射关系,数据流指的是组件之间的数据流动。v-model不是真正的双向数据流,是因为它不能直接修改父组件的值,比如你在v-model中绑定props中的值是会报错的,它只能绑定组件的值。
而真正的双向数据流,比如AngularJs,是允许在子组件中直接更新父组件的值的,这也是为什么说v-model只是语法糖的原因。
总得来说,单双向数据绑定与数据流是两个不同维度的概念,数据绑定是View与Model之间的映射关系,数据流指的是组件之间的数据流动。因此,单向数据流也可有双向绑定,双向数据流也可以有双向绑定,两者不应该混为一谈。