本篇文章带大家了解一下vue中的单项数据流和双向数据绑定，分析一下vue的双向绑定和单向数据流冲突吗？希望对大家有所帮助！
众所周知，vue中更加推荐单向数据流的状态管理模式(比如vuex)，但vue同时支持通过v-model实现双向数据绑定。（学习视频分享：vuejs教程）
那么问题来了，单项数据流和双向数据绑定的概念，这两种不是相互冲突的吗？即然能用v-model双向数据绑定，不应该就是双向数据流了吗？
本文主要包括以下内容
单向绑定 vs 双向绑定
单向数据流 vs 双向数据流
为什么说v-model只是语法糖
单向绑定 vs 双向绑定
单双向绑定，指的是view层和model层之间的映射关系。
react采取单向绑定，如图所示：
在react中，当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的单向绑定。两者各有利弊，单向绑定清晰可控，但是模板代码过多，双向绑定可以简化开发，但是也会导致数据变化不透明，优缺点共存，大家可以根据情况使用。
单向数据流 vs 双向数据流
数据流指的是组件之间的数据流动。
vue与react都是单向数据流的模型，虽然vue有双向绑定v-model，但是vue和react父子组件之间数据传递，仍然还是遵循单向数据流的，父组件可以向子组件传递props，但是子组件不能修改父组件传递来的props，子组件只能通过事件通知父组件进行数据更改，如图所示：
通过单向数据流的模型，所有状态的改变可记录、可跟踪，相比于双向数据流可加容易维护与定位问题
为什么说v-model只是语法糖
你可以用 v-model 指令在表单 d5fd7aea971a85678ba271703566ebfd、4750256ae76b6b9d804861d8f69e79d3 及 221f08282418e2996498697df914ce4e 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理
正如上面所述，vue文档中说v-model只是语法糖
<input v-model=“phoneinfo.phone”/>//在组件中使用时，实际相当于下面的简写<input :value="phoneinfo.phone" @input="val => { phoneinfo.phone = val }"
那么问题来了，为什么说v-model不是真正的双向数据流呢？按照这道理，是不是可以认为model->view的单向数据流也是语法糖啊，也是vue作者通过一定方法实现的而已
真正的原因上面已经说了，数据绑定是view与model之间的映射关系，数据流指的是组件之间的数据流动
v-model不是真正的双向数据流，是因为它不能直接修改父组件的值，比如你在v-model中绑定props中的值是会报错的，它只能绑定组件的值
而真正的双向数据流，比如angularjs，是允许在子组件中直接更新父组件的值的，这就是为什么说v-model只是语法糖的原因
总结
总得来说，单双向数据绑定与数据流是两个不同维度的概念，数据绑定是view与model之间的映射关系，数据流指的是组件之间的数据流动。因此，单向数据流也可有双向绑定，双向数据流也可以有双向绑定，两者不应该混为一谈
本文转载自：https://juejin.cn/post/7085139499767840782
作者：程序员江同学
（学习视频分享：web前端开发、编程入门）
以上就是了解vue中的单项数据流和双向数据绑定，两种冲突吗？的详细内容。