扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
这篇“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
指令在表单、
及
元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但
v-model
本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理
正如上面所述,Vue
文档中说v-model
只是语法糖
//在组件中使用时,实际相当于下面的简写 { PhoneInfo.phone = val }"
那么问题来了,为什么说v-model
不是真正的双向数据流呢?按照这道理,是不是可以认为model->view
的单向数据流也是语法糖啊,也是vue
作者通过一定方法实现的而已
真正的原因上面已经说了,数据绑定是View
与Model
之间的映射关系,数据流指的是组件之间的数据流动
v-model
不是真正的双向数据流,是因为它不能直接修改父组件的值,比如你在v-model
中绑定props
中的值是会报错的,它只能绑定组件的值
而真正的双向数据流,比如AngularJs
,是允许在子组件中直接更新父组件的值的,这就是为什么说v-model
只是语法糖的原因
以上就是关于“vue中的单项数据流和双向数据绑定冲不冲突”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流