Vue的单向数据流和双向数据绑定不是冲突的吗?

vue有单项数据流和双向数据绑定的概念,但是这两种不是冲突的吗?即然能用v-model双向数据绑定,不应该就是双向数据流了吗?

回答:

单向绑定 vs 双向绑定

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

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的单向绑定。
vue的v-model在操作表单是,显得很简单,我们不用去写繁琐的onChange事件去处理每个表单数据的变化,但是双向绑定也会导致数据变化不透明,不清晰可控。优点和缺点共存,有时候一个人的优点也是一个人的缺点,道理都是相通的。

单向数据流 vs 双向数据流

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

vue和react仅单向数据流

虽然vue有双向绑定v-model,但是vue和react父子组件之间数据传递,仍然还是遵循单向数据流的,父组件可以向子组件传递props,但是子组件不能修改父组件传递来的props,子组件只能通过事件通知父组件进行数据更改,如图所示:
图片描述
优点是所有状态的改变可记录、可跟踪,源头易追溯; 所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性

angularJs可以双向数据流

相比之下,元老级框架AngularJS却不一样,它允许在子组件中直接更新父组件的值

数据流与绑定

准确来说两者并不是一回事。单向数据流也可有双向绑定,双向数据流也可以 有双向绑定
但是很多资料混为一谈
image.png

回答:

vue 的v-model 本质上是单向数据流,只是做了用户输入触发事件,更新数据的封装, 数据流是 data=> el form (value) =>(用过户输入)=> 触发change 事件=> vue 实例中监听到 chang事件=> 更新data 中的数据, 这个可以类比react 中的受控表单,

vue 文档: 链接 (https://cn.vuejs.org/v2/guide…
图片描述

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注