首页 >

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

web前端|Vue.js了解vue中的单项数据流和双向数据绑定,两种冲突吗?
vue,单项数据流,双向数据绑定
web前端-Vue.js
本篇文章带大家了解一下vue中的单项数据流和双向数据绑定,分析一下Vue的双向绑定和单向数据流冲突吗?希望对大家有所帮助!
在线 源码 阅读,ubuntu中g 命令,tomcat 下载服务器,爬虫网页referer,php实验5,H5单页面可以做seo吗lzw
蚂蚁信息分类源码下载 5.8,怎样编译vscode 源码,ubuntu添加键盘,tomcat猫胺好吗,headlessjava爬虫,php输出到浏览器,网址导航站怎么seo,带附近商家网站源码,app下载页面源码模板lzw
众所周知,Vue中更加推荐单向数据流的状态管理模式(比如Vuex),但Vue同时支持通过v-model实现双向数据绑定。(学习视频分享:vuejs教学)
免费java源码下载,更改vscode软件编码,冥王峡谷ubuntu,手机链接tomcat,h5如何连接sqlite数据库,rspace 爬虫,php数组存入数据库,福州晋安seo优化定制,python 网站的源码下载,index单页模板lzw
那么问题来了,单项数据流和双向数据绑定的概念,这两种不是相互冲突的吗?即然能用v-model双向数据绑定,不应该就是双向数据流了吗?

本文主要包括以下内容

单向绑定 vs 双向绑定

单向数据流 vs 双向数据流

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

单向绑定 vs 双向绑定

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

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

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,子组件只能通过事件通知父组件进行数据更改,如图所示:

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

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

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

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

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

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

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

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

总结

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

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


了解vue中的单项数据流和双向数据绑定,两种冲突吗?
  • angularjs学习笔记之双向数据绑定_AngularJS
  • angularjs学习笔记之双向数据绑定_AngularJS | angularjs学习笔记之双向数据绑定_AngularJS ...

    了解vue中的单项数据流和双向数据绑定,两种冲突吗?
  • 在Angular中如何实现双向数据绑定
  • 在Angular中如何实现双向数据绑定 | 在Angular中如何实现双向数据绑定 ...

    了解vue中的单项数据流和双向数据绑定,两种冲突吗?
  • Vue双向数据绑定的原理是什么
  • Vue双向数据绑定的原理是什么 | Vue双向数据绑定的原理是什么 ...