网站建设资讯

NEWS

网站建设资讯

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

这篇“vue中的单项数据流和双向数据绑定冲不冲突”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“vue中的单项数据流和双向数据绑定冲不冲突”文章吧。

创新互联建站从2013年成立,先为和田等服务建站,和田等地企业,进行企业商务咨询服务。为和田企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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

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

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

单向绑定 vs 双向绑定

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

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

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

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中的单项数据流和双向数据绑定冲不冲突

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

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

你可以用 v-model 指令在表单