美文网首页
单向数据流和双向数据流

单向数据流和双向数据流

作者: 卓三阳 | 来源:发表于2018-10-20 14:23 被阅读485次

在react中是单向数据绑定,而在vue中的特色是双向数据绑定。但是其实就我个人的理解是:
其实无论是vue还是react其实还是提倡单向数据流去管理状态,这一点在vuex和redux状态管理器上体现的很明显。只是vue为UI控件提供了双向数据绑定的方式,在一些需要实时反应用户输入的场合会非常方便。但通常认为复杂应用中这种便利比不上引入状态管理带来的优势


1.单向数据流

“单向数据流”理念的极简示意:

image.png

state:驱动应用的数据源。view:以声明方式将 state 映射到视图 。 actions:响应在 view 上的用户输入导致的状态变化

1.1 单向数据流过程:
简单的单向数据流(unidirectional data flow)是指用户访问View,View发出用户交互的Action,在Action里对state进行相应更新。state更新后会触发View更新页面的过程。这样数据总是清晰的单向进行流动,便于维护并且可以预测。

1.2 vuex和redux解决什么问题:
虽然vue和react框架本身有自己状态管理,当我们的应用遇到多个组件共享状态时,单向数据流的简洁性很容易被破坏

(1)多个视图依赖于同一状态
(2)来自不同视图的行为需要变更同一状态

对于问题一,传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。
对于问题二,我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱,通常会导致无法维护的代码。

因此,我们为什么不把组件的共享状态抽取出来,以一个全局单例模式管理呢?在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!
另外,通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护。

1.3 特点:
(1) 所有状态的改变可记录、可跟踪,源头易追溯;
(2) 所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性;
(3) 一旦数据变化,就去更新页面(data-页面),但是没有(页面-data);
(4) 如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到原有的数据中。


2.双向数据流

双向数据绑定,带来双向数据流。数据(state)和视图(View)之间的双向绑定。

ng 里的 ng-model 和 vue 里的 v-model。

说到底就是 (value 的单向绑定 + onChange 事件侦听)的一个语法糖,你如果不想用 v-model,像 React 那样处理也是完全可以的。

2.1 特点:
无论数据改变,或是用户操作,都能带来互相的变动,自动更新。适用于项目细节,如:UI控件中(通常是类表单操作)。


参考

单向数据绑定和双向数据绑定的优缺点,适合什么场景?
单向数据绑定【单向数据流】与双向数据绑定【双向数据流】
Vuex | Redux |Flux

相关文章

  • Vue 中的双向数据绑定

    双向绑定 单向数据流 双向绑定 or 单向数据流 Vue 是单向数据流,不是双向绑定 Vue 的双向绑定是语法糖 ...

  • 常见vue面试题

    1. 解释单向数据流和双向数据绑定单向数据流: 数据流是单向的。数据流动方向可以跟踪,流动单一,追查问题的时候可以...

  • 前端三大框架:数据绑定与数据流

    目录序言单向数据绑定 vs 双向数据绑定单向数据流 vs 双向数据流数据流与数据绑定参考1. 序言在前端三大主流的...

  • 双向数据绑定和单向数据流区别

    双向数据绑定和单向数据流区别 单向数据绑定优缺点:优点:单向数据流,所有状态变化都可以被记录、跟踪,状态变化通过手...

  • VUE面试题补充

    上一篇链接:vue的一些基础知识(涉及面试题) 1.解释单向数据流和双向数据绑定 单向数据流: 顾名思义,数据流是...

  • 单向数据流和双向数据流

    在react中是单向数据绑定,而在vue中的特色是双向数据绑定。但是其实就我个人的理解是:其实无论是vue还是re...

  • Vue的双向绑定和单向数据流

    五一假期在家补了课,看到双向绑定与单向数据流的概念。瓦特,我之前以为Vue的V-model就是双向数据流,其实不然...

  • vue2 .sync修饰符

    我们都知道,组件之间通过props 或者 $emit 传值都是单向数据流的。如果我们想实现双向数据流的话,我们通常...

  • 单项数据流与Vuex

    单项数据流 单向数据流(Unidirectional data flow)方式使用一个上传数据流和一个下传数据流进...

  • Vue 几个要点(一)

    Vue是单向数据流,不是双向绑定 Vue的双向绑定不过是语法糖 Object.defineProperty是用来做...

网友评论

      本文标题:单向数据流和双向数据流

      本文链接:https://www.haomeiwen.com/subject/wefcnftx.html