vue中的单项数据流和双向数据绑定冲不冲突

这篇“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://dzwzjz.com/article/ihijis.html">http://dzwzjz.com/article/ihijis.html</a> </div> </div> <div class="othernews"> <h3>其他资讯</h3> <div class="othernews_list"> <ul> <li> <a href="/article/dddhsii.html">wordpress昵称 wordpress用户名中文限制</a> </li><li> <a href="/article/dddhshi.html">智能聊天翻译论文 翻译论文app</a> </li><li> <a href="/article/dddhsgi.html">怎么查php数据库内容 php查询数据库内容表格</a> </li><li> <a href="/article/dddhspg.html">vb.net计算器_ vb计算器代码详解</a> </li><li> <a href="/article/dddhshj.html">阿里云购买的服务器ping不通 新买的阿里云服务器无法连接</a> </li> </ul> </div> </div> </div> </div> <div class="footer"> <div class="footer_content"> <div class="footer_content_top clear"> <div class="content_top_share fl"> <div><img src="/Public/Home/img/logo.png"></div> <div class="top_share_content"> <dd>分享至：</dd> <dt class="bdsharebuttonbox clear" id="share"> <a href="#" class="bds_tsina iconfont fl" data-cmd="tsina" title="分享到新浪微博"></a> <a href="#" class="bds_sqq iconfont fl" data-cmd="sqq" title="分享到QQ好友"></a> <a href="#" class="bds_weixin iconfont fl" data-cmd="weixin" title="分享到微信"></a> <a href="#" class="bds_weixin iconfont fl" data-cmd="tieba" title="分享到贴吧"></a> </dt> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </div> </div> <div class="content_top_left fl clear"> <div class="top_left_list fl"> <dd><a href="/about/">关于我们</a></dd> <dt> <a href="/about/#gsjj">公司简介</a> <a href="/about/#fzlc">发展历程</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/service/">服务项目</a></dd> <dt> <a href="/service/">高端网站建设</a> <a href="/miniprogram/">小程序开发</a> <a href="/service/app.html">APP开发</a> <a href="/service/yingxiao.html">网络营销</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/jianzhan/">建站知识</a></dd> <dt> <a href="/jianzhan/">行业新闻</a> <a href="/jianzhan/">建站学堂</a> <a href="/jianzhan/">常见问题</a> </dt> </div> <div class="top_left_list fl"> <dd><a href="/contact/">联系我们</a></dd> <dt> <a href="/contact/#lxwm">公司地址</a> <a href="/contact/#rczp">人才招聘</a> </dt> </div> </div> <div class="content_top_right addressR fr"> <div class="top_right_title addressf_title"> <a href="javascript:;" class="on">成都</a> <a href="javascript:;">达州</a> </div> <div class="top_right_content addressf"> <div class="right_content_li on"> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">电话：028-86922220</dt> </div> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">地址：成都市太升南路288号锦天国际A幢1002号</dt> </div> </div> <div class="right_content_li"> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">电话：028-86922220</dt> </div> <div class="right_content_list clear"> <dd class="fl iconfont"></dd> <dt class="fl">地址：达州市南岸区弹子石腾龙大道58号2栋21-6</dt> </div> </div> </div> </div> </div> <div class="link"> 友情链接： <a href="http://www.kratc.com/" title="成都开元" target="_blank">成都开元</a>   <a href="http://www.shruijie.cn/" title="上海除甲醛" target="_blank">上海除甲醛</a>   <a href="https://www.cdcxhl.com/xiangyingshi.html" title="响应式网站建设" target="_blank">响应式网站建设</a>   <a href="http://chengdu.cdxwcx.cn/wangzhan/" title="公司网站建设" target="_blank">公司网站建设</a>   <a href="http://www.bzwzjz.com/" title="专业网站建设" target="_blank">专业网站建设</a>   <a href="http://chengdu.kswsj.cn/" title="高端网站设计推广" target="_blank">高端网站设计推广</a>   <a href="http://www.scfushun.com/" title="富顺网站建设" target="_blank">富顺网站建设</a>   <a href="https://www.cdxwcx.com/jifang/ershu.html" title="成都二枢机房" target="_blank">成都二枢机房</a>   <a href="http://www.cdkjz.cn/wangzhan/jituan/" title="成都集团网站建设" target="_blank">成都集团网站建设</a>   <a href="https://www.cdcxhl.com/xiyun.html" title="成都移动主机托管" target="_blank">成都移动主机托管</a>    </div> </div> <div class="footer_content_copyright clear">版权所有：青羊区大橙子信息咨询工作室 <a href="http://beian.miit.gov.cn/" rel="nofollow" target="_blank">蜀ICP备2022028542号-14</a> </div> </div> <!--浮窗--> <div class="FloatingWindow clear"> <a href="tencent://message/?uin=1683211881&Site=&Menu=yes" class="FloatingWindow_list fr"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt><span>在线</span>咨询</dt> </div> </a> <a href="javascript:;" class="FloatingWindow_list fr"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt>服务热线</dt> </div> <div class="FloatingWindow_list_down fadeInRight animated">服务热线：028-86922220</div> </a> <a href="javascript:;" class="FloatingWindow_list fr STop"> <div class="FloatingWindow_list_title"> <dd class="iconfont"></dd> <dt>TOP</dt> </div> </a> </div> <script src="/Public/Home/js/jquery-1.8.3.min.js"></script> <script src="/Public/Home/js/comm.js"></script> <script src="/Public/Home/js/wow.js"></script> <script src="/Public/Home/js/common.js"></script> </body> </html> <script> $(".cont 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>