这篇“vue中的单项数据流和双向数据绑定冲不冲突”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue中的单项数据流和双向数据绑定冲不冲突”文章吧。

创新互联建站从2013年成立，先为和田等服务建站，和田等地企业，进行企业商务咨询服务。为和田企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

众所周知，Vue中更加推荐单向数据流的状态管理模式(比如Vuex)，但Vue同时支持通过v-model实现双向数据绑定。

那么问题来了，单项数据流和双向数据绑定的概念，这两种不是相互冲突的吗？即然能用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 指令在表单 、</code> 及 <code><select></code> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 <code>v-model</code> 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理</p></blockquote><p>正如上面所述，<code>Vue</code>文档中说<code>v-model</code>只是语法糖</p><pre><input v-model=“phoneInfo.phone”/> //在组件中使用时，实际相当于下面的简写 <input :value="PhoneInfo.phone" @input="val => { PhoneInfo.phone = val }"</pre><p>那么问题来了，为什么说<code>v-model</code>不是真正的双向数据流呢？按照这道理，是不是可以认为<code>model->view</code>的单向数据流也是语法糖啊，也是<code>vue</code>作者通过一定方法实现的而已</p><p>真正的原因上面已经说了，<strong>数据绑定是<code>View</code>与<code>Model</code>之间的映射关系，数据流指的是组件之间的数据流动</strong></p><p><code>v-model</code>不是真正的双向数据流，是因为它不能直接修改父组件的值，比如你在<code>v-model</code>中绑定<code>props</code>中的值是会报错的，它只能绑定组件的值</p><p>而真正的双向数据流，比如<code>AngularJs</code>，是允许在子组件中直接更新父组件的值的，这就是为什么说<code>v-model</code>只是语法糖的原因</p><p>以上就是关于“vue中的单项数据流和双向数据绑定冲不冲突”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。</p> <br> 网站栏目：vue中的单项数据流和双向数据绑定冲不冲突 <br> 网站路径：<a href="http://www.jxjierui.cn/article/ihijis.html">http://www.jxjierui.cn/article/ihijis.html</a> </div> <div class="hot_new"> <div class="page_title clearfix"> <h3>其他资讯</h3> </div> <div class="news_list clearfix"> <ul> <li> <a href="/article/hgjpcc.html">java输入一个数字代码 java输入一个数的代码</a> </li><li> <a href="/article/hgjpep.html">go语言变量相加 go语言语法</a> </li><li> <a href="/article/hgjpeg.html">go语言切片源码分析 go语言数组和切片</a> </li><li> <a href="/article/hgjpip.html">go语言的图像识别 go语言的图像识别是什么</a> </li><li> <a href="/article/hgjpic.html">java小写转大写代码 java数字小写转大写</a> </li> </ul> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div> <!-- 底部信息 --> <div class="footer wow fadeInUp"> <div class="rowFluid"> <div class="span12"> <div class="container"> <div class="footer_content"> <div class="span4 col-xm-12"> <div class="footer_list"> <div class="span6"> <div class="bottom_logo"><img src="/Public/Home/images/ewm.jpg" alt="微信服务号二维码" /></div> </div> <div class="span6 col-xm-12"> <div class="quick_navigation"> <div class="quick_navigation_title">快速导航</div> <ul> <li><a href="http://www.jyfdjzy.com/" title="jyfdjzy.com" target="_blank">jyfdjzy.com</a></li><li><a href="https://www.cdxwcx.com/tuiguang/" title="成都网站推广" target="_blank">成都网站推广</a></li><li><a href="http://www.gzzfdj.com/" title="甘孜发电机" target="_blank">甘孜发电机</a></li><li><a href="http://www.gafdjwx.com/" title="广安柴油发电机组维修" target="_blank">广安柴油发电机组维修</a></li><li><a href="http://www.fadianjiwx.com/" title="成都柴油发电机组维修" target="_blank">成都柴油发电机组维修</a></li><li><a href="http://www.scpengxi.com/" title="蓬溪网站制作公司" target="_blank">蓬溪网站制作公司</a></li><li><a href="http://www.cdmstgs.com/" title="成都商业雕塑定制" target="_blank">成都商业雕塑定制</a></li> </ul> </div> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_link"> <div class="footer_link_title">友情链接</div> <ul id="frientLinks"> <a href="https://www.cdcxhl.com/" title="网站制作" target="_blank">网站制作</a> <a href="https://www.cdcxhl.com/" title="网站建设" target="_blank">网站建设</a> <a href="https://www.cdxwcx.com/tuiguang/" title="成都网络推广" target="_blank">网络推广</a> <a href="http://seo.cdkjz.cn/" title="成都网站推广" target="_blank">网站推广</a> <a href="https://www.cdcxhl.com/xiaochengx.html" title="成都微信小程序开发" target="_blank">小程序开发</a> <a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a> </ul> <div class="footer_link_title">网站建设</div> <ul id="frientLinks"> <li><a href="/">内江浩晨众云建站</a></li> <li><a href="https://www.cdcxhl.com/menu.html" title="创新互联网站栏目导航" target="_blank">网站导航</a></li> </ul> </div> </div> </div> <div class="span4 col-xm-6 col-xs-12"> <div class="footer_list"> <div class="footer_cotact"> <div class="footer_cotact_title">联系方式</div> <ul> <li><span class="footer_cotact_type">企业：</span><span class="footer_cotact_content">青羊区浩晨众云设计工作室（个体工商户）</span></li> <li><span class="footer_cotact_type">地址：</span><span class="footer_cotact_content">成都市青羊区太升南路288号</span></li> <li><span class="footer_cotact_type">电话：</span><span class="footer_cotact_content"><a href="tel:18980820575" class="call">18980820575</a></span></li> <li><span class="footer_cotact_type">网址：</span><span class="footer_cotact_content"><a href="/" title="内江网站建设">www.jxjierui.cn</a></span></li> </ul> </div> </div> </div> </div> </div> <div class="copyright"> <p>公司名称：青羊区浩晨众云设计工作室（个体工商户） 联系电话：18980820575</p> <p><a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow">网站备案号：蜀ICP备2025119795号-2</a></p> <p>内江浩晨众云建站 内江网站建设 内江网站设计 内江网站制作 <a href="http://www.cdxwcx.cn/" target="_blank">成都做网站</a></p> </div> </div> </div> </div> </body> </html> <script> $(".technical_support_box_z_info_box img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>