了解vue中的单项数据流和双向数据绑定，两种冲突吗？

本篇文章带大家了解一下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 指令在表单、</code> 及 <code><select></code> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 <code>v-model</code> 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理</p></blockquote><p>正如上面所述，<code><a href="/tag-news-name-Vue-p-1.html">Vue</a></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><a href="/tag-news-name-vue-p-1.html">vue</a></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><strong><span style="font-size: 18px;">总结</span></strong></p><p>总得来说，单双向数据绑定与数据流是两个不同维度的概念，数据绑定是<code>View</code>与<code>Model</code>之间的映射关系，数据流指的是组件之间的数据流动。因此，单向数据流也可有双向绑定，双向数据流也可以有双向绑定，两者不应该混为一谈<br/></p><p><img src="/Uploads/news/2b65a388b2bcb6dc0873243b2491a0ac/1649942087746018.png" title="1649942087746018.png" alt="3.png"/></p><blockquote><p>本文转载自：https://juejin.cn/post/7085139499767840782<br/></p><p>作者：程序员江同学</p></blockquote><p>（学习视频分享：web前端开发、编程入门）</p><p>以上就是了解<a href="/tag-news-name-vue-p-1.html">vue</a>中的单项数据流和双向数据绑定，两种冲突吗？的详细内容，更多请关注www.sxiaw.com其它相关文章！</p></span> </div> </article> <script type="text/javascript" src="/index.php?s=hits-show-id-50857-type-insert-sid-news" charset="utf-8"></script><aside class="swnetnews"> <div class="lis"> <span><i>推荐内容</i></span> <ul> <li><a href="/doc/2393.html" title="【XML】UTF8和GB2312编码转换出现乱码的解决方案" target="_blank">【XML】UTF8和GB2312编码转换出现乱码的解决方案</a></li><li><a href="/doc/6773.html" title="phpMyAdmin 安装步骤" target="_blank">phpMyAdmin 安装步骤</a></li><li><a href="/doc/5460.html" title="怎么本地启动phpmyadmin" target="_blank">怎么本地启动phpmyadmin</a></li><li><a href="/doc/4568.html" title="聊聊转换Golang代码到Rust的实践操作" target="_blank">聊聊转换Golang代码到Rust的实践操作</a></li><li><a href="/doc/2510.html" title="golang厉害吗？有哪些厉害的地方（浅析）" target="_blank">golang厉害吗？有哪些厉害的地方（浅析）</a></li><li><a href="/doc/9422.html" title="十行 Python 代码实现酷炫功能" target="_blank">十行 Python 代码实现酷炫功能</a></li><li><a href="/doc/8198.html" title="Huggingface微调BART的代码示例：WMT16数据集训练新的标记进行翻译" target="_blank">Huggingface微调BART的代码示例：WMT16数据集训练新的标记进行翻译</a></li><li><a href="/doc/5994.html" title="在python中导入哪个库可以进行大数据分析" target="_blank">在python中导入哪个库可以进行大数据分析</a></li><li><a href="/doc/7905.html" title="win10系统桌面背景图片在哪个文件夹" target="_blank">win10系统桌面背景图片在哪个文件夹</a></li><li><a href="/doc/5032.html" title="return后面的值不能为表达式吗？" target="_blank">return后面的值不能为表达式吗？</a></li> </ul> </div> </aside> </main> <script> // first, find all the div.code blocks document.querySelectorAll('pre').forEach(el => { // then highlight each hljs.highlightElement(el); hljs.lineNumbersBlock(el); }); </script> <link rel="stylesheet" type="text/css" href="/kan/css/basezb.css"> <script type="text/javascript" src="/kan/js/read.js"></script> <div style="display:none"> <div class="login-box" id="login-dialog"> <div class="login-top"><a rel="nofollow" id="login1" onclick="setTab('login',1,2);" >登录</a></div> <div class="login-form" id="nav-signin">  <div class="login-box-form" id="con_login_1"> <form id="loginform" action="/user-center-login.html" method="post" onsubmit="return false;"> <p class="int-text"> <input class="email" id="username" name="username" type="text" value="用户名或Email" onfocus="if(this.value=='用户名或Email'){this.value='';}" onblur="if(this.value==''){this.value='用户名或Email';};" ></p> <p class="int-text"> <input class="password1" type="password" id="password" name="password" value="******" onBlur="if(this.value=='') this.value='******';" onFocus="if(this.value=='******') this.value='';" > </p> <p class="int-info"> <label class="ui-label"> </label> <label for="agreement" class="ui-label-checkbox"> <input type="checkbox" value="" name="cookietime" id="cookietime" checked="checked" value="2592000"> <input type="hidden" name="notforward" id="notforward" value="1"> <input type="hidden" name="dosubmit" id="dosubmit" value="1">记住我的登录 </label> <a rel="nofollow" class="aright" href="/user-center-forgetpwd.html" target="_blank"> 忘记密码？ </a></p> <p class="int-btn"><a rel="nofollow" id="loginbt" class="loginbtn"><span>登录</span></a></p> </form> </div> </div> </div> </div> </div> <script type="text/javascript" src="/kan/js/foot_js.js"></script> <div id="footer"> <div class="w1200"> <p class="tips_text">本网站为非赢利性站点，本网站所有内容均来源于互联网相关站点自动搜索采集信息，相关链接已经注明来源。</p> <p class="tips_text">Copyright © 2004-2018 https://www.sxiaw.com. All Rights Reserved.<script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?fa236be8ec7680639fbd4ee307fd0c69"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <a href="http://beian.miit.gov.cn/" target="_blank">津ICP备2023001793号-1</a></p> </div> </div> </body> </html>