在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控件中(通常是类表单操作)。

参考资料:

https://github.com/vuejs/vuex/blob/master/docs/zh-cn/forms.md

https://www.jianshu.com/p/810464f1a576

vue 单向数据流 & 双向绑定的更多相关文章

  1. 剖析Vue原理&实现双向绑定MVVM-1

    本文能帮你做什么?1.了解vue的双向数据绑定原理以及核心代码模块2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考 ...

  2. Vue框架之双向绑定事件

    Vue框架之双向绑定事件 首先介绍下Vue框架的语法 vue通过 {{temp}} 来渲染变量 {{count+100}} # 求和 v-text # 为标签插入text文本 v-html # 为标签 ...

  3. 用ES6的class模仿Vue写一个双向绑定

    原文地址:用ES6的class模仿Vue写一个双向绑定 点击在线尝试一下 最终效果如下: 构造器(constructor) 构造一个TinyVue对象,包含基本的el,data,methods cla ...

  4. 组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双向绑定数据

    组件的通信 :provide / inject 对象进入后,就等于不用props,然后内部对象,直接复制可以接受数组,属性不能直接复制,可以用Object.assgin覆盖对象,或者Vue的set 双 ...

  5. Vue的数据双向绑定和Object.defineProperty()

    Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...

  6. 原生js实现 vue的数据双向绑定

    原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...

  7. vue中的双向绑定

    概述 今天对双向绑定感兴趣了,于是去查了下相关文章,发现有用脏检查的(angular.js),有用发布者-订阅者模式的(JQuery),也有用Object.defineProperty的(vue),其 ...

  8. Vue - 自定义组件双向绑定

    前言 无论在任何的语言或框架中,我们都提倡代码的复用性.对于Vue来说也是如此,相同的代码逻辑会被封装成组件,除了复用之外,更重要的是统一管理提高开发效率.我真就接手过一个项目,多个页面都会用到的列表 ...

  9. 前端 | 自定义组件 v-model:Vue 如何实现双向绑定

    v-model 是 Vue 中一个常用的指令,常用于表单中的数据绑定.如下基本用法想必大家都很熟悉,data 中的 checked 属性的值就会随着多选框的状态实时变化. <el-checkbo ...

随机推荐

  1. nginx.conf 基础配置

    ### 全局块开始### #配置允许运行nginx服务器的用户和用户组 user nobody; #配置允许nginx进程生成的worker process 数 worker_processes 1; ...

  2. 超酷JQuery动画分页按钮,鼠标悬停滑动展开

    1.效果及功能说明 animate动画分页按钮制作鼠标悬停分页按钮上滑动展开分页按钮,鼠标离开后分页按钮收缩 2.实现原理 主要是靠动画方法,来让原本的箭头图像的长度发生变长,正好可以融入下标题的文字 ...

  3. Richard Stallman:让我们关注和尊敬自由软件教父

    1953年,Richard Stallman生于美国纽约曼哈顿区.在度过了并不快乐的童年之后,他在哈佛大学找到了自己的家.在MIT人工智能实验室工作期间,展露出了自己的计算 机天赋.对他来说,开发操作 ...

  4. windows 下 react-native(v0.56) Android 环境搭建踩坑记录

    debugservicereact-native 安装官网 https://reactnative.cn/docs/getting-started.html 根据官网步骤一步步执行下去.还能碰到一些问 ...

  5. Python练习-sys.argv的无聊用法

    代码如下: # 编辑者:闫龙 #将三次登陆锁定的作业改为: # python login.py -u alex -p 123456 输入的形式 # (-u,-p是固定的,分别代表用户名和密码) imp ...

  6. 【iptables】linux网络防火墙-iptables基础详解(重要)

    一:前言   防火墙,其实说白了讲,就是用于实现Linux下访问控制的功能的,它分为硬件的或者软件的防火墙两种.无论是在哪个网络中,防火墙工作的地方一定是在网络的边缘.而我们的任务就是需要去定义到底防 ...

  7. linux快速安装mysql教程

    #安装mysql服务器:yum install mysql-server #设置开机启动chkconfig mysqld on#现在启动服务service mysqld start #设置root初始 ...

  8. bootstrap File Input 多文件上传插件使用记录(二)删除原文件

    在上一篇文章中,主要介绍了file input插件的初始化和多文件同步上传到服务器的相关配置等.这篇主要介绍file input插件的编辑等. 使用场景: 在后台管理框架中,一条数据中包含不固定的多张 ...

  9. P1986 元旦晚会

    一道可以用各种各样的办法做的(水)题 在这里就介绍两种做法 题意: 自己看看吧,很明显的意思,就是求前i个人最少有多少个话筒. 解法1:差分约束 设\(dis[i]\)表示前\(i\)个人最少有多少个 ...

  10. R语言学习笔记:sort、rank、order、arrange排序函数

    R语言中排序有几个基本函数:sort().rank().order().arrange() 一.总结 sort()函数是对向量进行从小到大的排序 rank()函数返回的是对向量中每个数值对应的秩 or ...