站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

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

时间:2022-04-15 [网络编程]作者:fabuyuan 浏览:8 次

本篇文章带大家了解一下vue中的单项数据流和双向数据绑定,分析一下Vue的双向绑定和单向数据流冲突吗?希望对大家有所帮助!

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

众所周知,Vue中更加推荐单向数据流的状态管理模式(比如Vuex),但Vue同时支持通过v-model实现双向数据绑定。(学习视频分享:vuejs教程)

那么问题来了,单项数据流和双向数据绑定的概念,这两种不是相互冲突的吗?即然能用v-model双向数据绑定,不应该就是双向数据流了吗?

本文主要包括以下内容

  • 单向绑定 vs 双向绑定

  • 单向数据流 vs 双向数据流

  • 为什么说v-model只是语法糖

单向绑定 vs 双向绑定

单双向绑定,指的是View层和Model层之间的映射关系。

react采取单向绑定,如图所示:

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

React中,当View层发生更改时,用户通过发出Actions进行处理,Actions中通过setStateState进行更新,State更新后触发View更新。可以看出,View层不能直接修改State,必须要通过Actions来进行操作,这样更加清晰可控

单向绑定的方式的优点在于清晰可控,缺点则在于会有一些模板代码,Vue则同时支持单向绑定和双向绑定

  • 单向绑定:插值形式{{data}}v-bind也是单向绑定
  • 双向绑定:表单的v-model,用户对View层的更改会直接同步到Model

实际上v-model只是v-bind:valuev-on:input的语法糖,我们也可以采取类似react的单向绑定。两者各有利弊,单向绑定清晰可控,但是模板代码过多,双向绑定可以简化开发,但是也会导致数据变化不透明,优缺点共存,大家可以根据情况使用。

单向数据流 vs 双向数据流

数据流指的是组件之间的数据流动。

VueReact都是单向数据流的模型,虽然vue有双向绑定v-model,但是vuereact父子组件之间数据传递,仍然还是遵循单向数据流的,父组件可以向子组件传递props,但是子组件不能修改父组件传递来的props,子组件只能通过事件通知父组件进行数据更改,如图所示:

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

通过单向数据流的模型,所有状态的改变可记录、可跟踪,相比于双向数据流可加容易维护与定位问题

为什么说v-model只是语法糖

你可以用 v-model 指令在表单 <input><textarea><select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理

正如上面所述,Vue文档中说v-model只是语法糖

<input v-model=“phoneInfo.phone”/>

//在组件中使用时,实际相当于下面的简写
<input :value="PhoneInfo.phone" @input="val => { PhoneInfo.phone = val }"

那么问题来了,为什么说v-model不是真正的双向数据流呢?按照这道理,是不是可以认为model->view的单向数据流也是语法糖啊,也是vue作者通过一定方法实现的而已

真正的原因上面已经说了,数据绑定是ViewModel之间的映射关系,数据流指的是组件之间的数据流动

v-model不是真正的双向数据流,是因为它不能直接修改父组件的值,比如你在v-model中绑定props中的值是会报错的,它只能绑定组件的值

而真正的双向数据流,比如AngularJs,是允许在子组件中直接更新父组件的值的,这就是为什么说v-model只是语法糖的原因

总结

总得来说,单双向数据绑定与数据流是两个不同维度的概念,数据绑定是ViewModel之间的映射关系,数据流指的是组件之间的数据流动。因此,单向数据流也可有双向绑定,双向数据流也可以有双向绑定,两者不应该混为一谈

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

本文转载自:https://juejin.cn/post/7085139499767840782

作者:程序员江同学

(学习视频分享:web前端开发、编程入门)

以上就是了解vue中的单项数据流和双向数据绑定,两种冲突吗?的详细内容,更多请关注站长家园其它相关文章!

本文标签:  vue单项数据流双向数据绑定

转载请注明来源:了解vue中的单项数据流和双向数据绑定,两种冲突吗?

本文永久链接地址:https://www.adminjie.com/post/11194.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • redis怎么实现队列的阻塞、延时、发布和订阅

      redis怎么实现队列的阻塞、延时、发布和订阅

      本篇文章给大家带来了关于Redis的相关知识,其中主要介绍了关于怎么实现队列的阻塞、延时、发布和订阅的相关问题,下面一起来看一下,希望对大家有帮助。推荐学习:R...

    • jquery ul li值怎么增加背景颜色

      jquery ul li值怎么增加背景颜色

      两种方法:1、用css()设置背景属性,语法“$("ulli").css("background","颜色值")”。2、用attr()添背景样式,语法“$("...

    • jquery怎么修改滚动条位置

      jquery怎么修改滚动条位置

      修改方法:1、用scrollLeft(),可设置水平滚动条的位置,语法“$("滚动条元素").scrollLeft(位置值)”;2、用scrollTop(),可...

    • jquery怎么查询某字符出现的位置

      jquery怎么查询某字符出现的位置

      查询方法:1、利用“string.indexOf(需要查询的字符)”,可返回某个指定的字符串值在字符串中首次出现的位置;2、利用“string.lastInde...

    • linux中什么是静态路由

      linux中什么是静态路由

      在linux中,静态路由是路由项由手动设置的一种路由方式;即使网络状态已经改变或重新被组态,静态路由也是固定不变的,静态路由由网络管理员逐项加入路由表,可用“r...

    热门文章