精华内容
下载资源
问答
  • 其实无论是vue还是react其实还是提倡单向数据流去管理状态,这一点在vuex和redux状态管理器上体现的很明显。只是vue为UI控件提供了双向数据绑定的方式,在一些需要实时反应用户输入的场合会非常方便。但通常认为复杂...

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

    1.单向数据流

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

    单向数据流指只能从一个方向修改数据,姑且我们可以这样理解,如下图所示。一个父组件下有两个子组件1和子组件2,父组件可以向子组件传递数据。假如子组件都获取到了父组件的name,在子组件1中对name重新修改之后,子组件2和父组件中的值并不会发生改变,这正是因为Vue中的机制是单向数据流,子组件不能直接改变父组件的状态。但反过来,如果是父组件中的name修改了,当然两个子组件中的name也就改变了。

    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.双向数据绑定

    主要是由MVVM框架实现:

    在这里插入图片描述

    • Model与ViewModel之间的双向关系
      Model通过Ajax通信,发送数据给ViewModel。
      ViewModel也可以通过Ajax通信,发送请求给Model。
    • ViewModel与View之间的双向关系
      ViewModel中的数据改变,可以同时改变View上的显示内容。
      View上的内容改变(比如输入框中的内容),也可以同时改变ViewModel中对应的数据。

    双向数据绑定,带来双向数据流。ViewModel中的data部分和View之间的双向关系。。

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

    双向数据流/双向数据绑定:

    1)js内存属性改变,影响页面变化
    
    2)页面的改变硬性js 内存属性的改变
    

    当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom。

    文章参考博客:https://www.jianshu.com/p/810464f1a576
    参考 mvvm的介绍: https://www.jianshu.com/p/e4e3519a58a6

    展开全文
  • 单向数据流 vs 双向数据流 数据流指的是组件之间的数据流动。 虽然vue有双向绑定v-model,但是vue父子组件之间数据传递,仍然还是遵循单向数据流的,父组件可以向子组件传递props,但是子组件不能修改父组件传递来的...

    【本文偏向概念上的区分】

    单向数据流 vs 双向数据流

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

    虽然vue有双向绑定v-model,但是vue父子组件之间数据传递,仍然还是遵循单向数据流的,父组件可以向子组件传递props,但是子组件不能修改父组件传递来的props,子组件只能通过事件通知父组件进行数据更改。

    优点是所有状态的改变可记录、可跟踪,源头易追溯; 所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性

    vue支持单向绑定和双向绑定

    单向绑定:插值形式{{data}},v-bind也是单向绑定
    双向绑定:v-model,用户对View层的更改会直接同步到Model层

    【PS:关于双向数据绑定的传送门:vue双向绑定

    【学习自:https://segmentfault.com/q/1010000019491720】

    展开全文
  • 单向数据流 所有状态的改变可记录、可跟踪,源头易追溯;所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易...最后举个例子,vue中父传子的props就是单向数据流,而v-modal就是双向数据流 ...

    单向数据流

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

    双向数据绑定

    无论数据改变,或是用户操作,都能带来互相的变动,自动更新。

    最后举个例子,vue中父传子的props就是单向数据流,而v-modal就是双向数据流

    展开全文
  • 单向数据绑定:指的是我们先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,...优点:相应的可以带来单向数据流,这样做的好处是所有状态变化都可以被记录、跟踪,状态变化通过手动调...

    单向数据绑定:指的是我们先把模板写好,然后把模板和数据(数据可能来自后台)整合到一起形成HTML代码,然后把这段HTML代码插入到文档流里面。

    缺点:HTML代码一旦生成完以后,就没有办法再变了,如果有新的数据来了,那就必须把之前的HTML代码去掉,再重新把新的数据和模板一起整合后插入到文档流中。

    优点:相应的可以带来单向数据流,这样做的好处是所有状态变化都可以被记录、跟踪,状态变化通过手动调用通知,源头易追溯。

     

    双向数据绑定:数据模型(Module)和视图(View)之间的双向绑定,用户在视图上的修改会自动同步到数据模型中去,同样的,如果数据模型中的值发生了变化,也会立刻同步到视图中去。

    缺点:无法追踪局部状态的变化,潜在的行为增加了debug的难度,由于组件数据的入口不止一个,新手很容易将数据流方向弄的紊乱,很容易因为一些操作造成雪崩。

    优点:双向数据绑定的优点是无需进行和单向数据绑定的那些CRUD(Create,Retrieve,Update,Delete)操作,
    双向数据绑定最经常的应用场景就是表单了,这样当用户在前端页面完成输入后,不用任何操作,我们就已经拿到了用户的数据存放到数据模型中了,在表单交互较多的场景下,会简化大量业务无关的代码。
    目前。实现双向数据绑定的前端框架主要有AngularJS,VueJS(通过引入vuex来实现单项的数据监控)等 

    转载于:https://www.cnblogs.com/longjin/p/8588529.html

    展开全文
  • 1.React是单向数据流 react只有M到V是框架自动实现的,V到M值更新需要开发者编写代码实现 2.vue是双向数据绑定 vue会自动同步M和V的值,框架自动实现 总结 无论是单向数据还是双向,最终呈现给用户的都是同步效果....
  • 详解单向数据流双向数据绑定

    千次阅读 多人点赞 2019-06-06 17:54:58
    在学习和接触 Vue 的过程中,接触到 Vue 的两个特性,单向数据流双向数据绑定,他们是什么,特点如何,以及彼此之间的关系和联系又有什么,接下来,我们深入的探究一下它们。 单向数据流 数据流,表明的是数据...
  • vue单向数据流双向绑定两者区别

    千次阅读 2018-09-07 17:15:07
    1.Vue 在不同组件间强制使用单向数据流,父组件可以向子组件传递数据,但是子组件不能直接修改父组件的状态。 2.数据的双向绑定 主要由MVVM框架实现,主要由三部分组成View、ViewModel和Model组成,其中view和model...
  • Vue 的数据流本质上是单向数据流,而我们平时说的双向数据绑定,只是Vue的一个语法糖,也就是说,Vue在数据流方面既可以实现单向数据流也可以实现双向数据绑定。 双向数据绑定实现原理: <input type=...
  • vue的单向数据流双向绑定解释

    千次阅读 2017-09-18 15:17:06
    Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。 双向绑定v-model是同时实现bind attribute(value)和Listen to event(input) 以下给出v-model和手动双向绑定的代码 <template>...
  • [vue] 说说你对单向数据流双向数据流的理解 单向数据流:所有状态的改变可记录、可跟踪,源头易追溯;所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性;一旦...
  • 一、单向数据流 --- 只能从一个方向修改数据 数据从父组件传给子组件,只能单向绑定,子组件对父组件的数据只能访问不能修改。 父组件通过props传递数据给子组件,父组件是不能是直接访问子组件的数据的。 二 ...
  • 双向绑定,从字面上来看我的理解就是通过数据关联的...它又为什么会被设计成单向数据流? 这里我们要记住一点,Vue是单项数据流,不是双向绑定。Vue所体现的双向绑定是一种语法糖。 Object.defineProperty是用来做...
  • react单向数据流Unidirectional Data Flow is not a concept unique to React, but as a JavaScript developer this might be the first time you hear it. 单向数据流并不是React独有的概念,但是作为JavaScript...
  • 单向数据流是什么

    千次阅读 2019-06-01 10:22:54
    单向数据流是什么 ...与单向数据流对对应的是双向数据流(也叫双向绑定)。在双向数据流中,Model(可以理解为状态的集合) 中可以修改自己或其他Model的状态, 用户的操作(如在输入框中输入内...
  • 主要介绍了深入理解Vue 单向数据流的原理,详细的介绍了Vue 单向数据流的原理和使用,具有一定的参考价值,有兴趣的可以了解一下
  • 很多接触Vue开发不久的同学会有疑问,vue既然是单向数据流为什么会有双向绑定一说? 关于Vue数据绑定首先引用官网原话: AngularJS 使用双向绑定,Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加...
  • MVI即Model-View-Intent,它受Cycle.js前端框架的启发,提倡一种单向数据流的设计思想,非常适合数据驱动型的UI展示项目: Model: 与其他MVVM中的Model不同的是,MVI的Model主要指UI状态(State)。当前界面展示的...
  • Vuex的单向数据流

    2021-03-18 13:47:35
    单向数据流对对应的是双向数据流(也叫双向绑定)。在双向数据流中,Model(可以理解为状态的集合) 中可以修改自己或其他Model的状态, 用户的操作(如在输入框中输入内容)也可以修改状态。这使改变一个状态有...
  • https://www.jianshu.com/p/374d6006292f
  • Vue之单向数据流

    2020-05-09 11:32:21
    那么单向数据流就是我们的数据是单一方向传输。 对于 Vue 来说,组件之间的数据传递具有单向数据流这样的特性。 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中...
  • .sync这个修饰符,平时用的没那么多,直到有次发现子组件中的数据,除了需要来源于父组件中传来的值,还需要子组件本身的单击修改props自身的值,这样一来子组件中的数据来源就不止父组件的传值,还有自身的传值修改...
  • vuex之单向数据流

    2019-03-21 20:34:00
    单向数据流 State State 用来存状态。在根实例中注册了store 后,用 this.$store.state 来访问。 Getters Getters 从 state 上派生出来的状态。可以理解为基于 State 的计算属性。很多时候,不需要 Getters...
  • React中的单向数据流

    2020-03-03 23:39:45
    ReactDOM.render()是单向数据流,当数据发生变化时,视图并不会更新 <div id="root"></div> <script type="text/babel"> let num = 0; ReactDOM.render(( <input type="button" onClick=...
  • 使用RxSwift和单向数据流的干净架构 一个演示项目,展示使用RxSwift和单向数据流使用Clean Archicture设置应用程序的过程。 该体系结构具有独立的表示层,因此状态中没有存储冗余值,并且视图仅接收其所需的元素。 ...
  • Recombine Recombine是Swift中单向数据流架构的类似Redux的实现。 关于Recombine Recombine遵循三个原则:Store以Recombine的形式存储您的整个应用程序状态Recombine是Swift中单向数据流体系结构的Redux类实现。 ...
  • 如何理解Vue中的单向数据流

    千次阅读 2020-03-22 19:29:06
    Vue官方文档对单向数据流有着如下定义 官网中说,在子组件中直接操作props会发出警告。实例如下 let btn = Vue.component('button-counter', { data: function () { return { count: 0 } }, ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 35,968
精华内容 14,387
关键字:

单向数据流双向数据流