当前位置: 首页 > news >正文

双向数据绑定与单向数据绑定

在react中是单向数据绑定,而在vue和augular中的特色是双向数据绑定。为什么会选择两种不同的机制呢?我猜测是两种不同的机制有不同的适应场景,查了一些资料后,总结一下。

一、各自优势

双向数据绑定给人的最大的优越感就是方便。当数据data发生变化时,页面自动发生更新。但是有一个缺点也是因为自动更新而导致的,因为这样你就不知道data什么时候变了,也不知道是谁变了,变化后也不会通知你,当然你可以watch来监听data的变化,但是这变复杂了,还不如单向数据绑定。

所以说按照方神的说法:Vuex推荐单向绑定就是为了[控制欲]!,虽然单向绑定牺牲了一部分便捷性,换来的是更大的[控制力]

除此之外单向数据绑定对于复杂应用来说是实施统一的状态管理,方便跟踪。

更多讨论见知乎:https://www.zhihu.com/question/49964363

二、单向数据与双向数据关系

单向数据绑定的实现思路:

  1. 所有数据只有一份
  2. 一旦数据变化,就去更新页面(data-页面),但是没有(页面-data)
  3. 如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到原有的数据中。

其实单向绑定也有双向绑定的意味,不过页面变动后数据的变化不会自动更新。方神解析了这个魔法:双向绑定 = 单向绑定 + UI事件监听。请看下面的代码示例

vue数据单向绑定

<body>
  <div id="app">
    <input type="text" v-model="meg">
    <p>{{data}}</p>
  </div>
 
  <script>
    var app = new Vue({
      el:'#app',
      data :{
        meg:''
      }
     
    })
  </script>
</body>

当你在页面的input框中输入值时,下面一行同步显示内容,如果我们不要v-model指令能实现这个效果吗? 只需要改为:

 //首先设置value属性为meg,然后监听输入事件
<input type="text" :value="meg" @input="meg=$event.target.value"> 

同样也实现了双向数据绑定,所以它并不是什么黑魔法!

 

转载于:https://www.cnblogs.com/luoqian/p/6440146.html

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • trying to connect to host mail.tr158.cn, port 50, isSSL false
  • Delphi XE7 随笔(2)- 字典
  • BZOJ3672:[NOI2014]购票
  • AIR:faultCode=Client.Error.MessageSend
  • flex浏览器的标题只显示#号
  • Web API 跨域请求
  • myeclipse安装flex
  • 提高myeclipse启动速度
  • 单链表逆转
  • SMTP协议原始命令码和工作原理
  • Maven编译代码的相关命令
  • java实用正则表达式工具类
  • cmd命令使用笔记
  • 常见的remoteobject错误
  • 剑指offer编程题Java实现——面试题10二进制中1的个数
  • ES6指北【2】—— 箭头函数
  • 【108天】Java——《Head First Java》笔记(第1-4章)
  • 【162天】黑马程序员27天视频学习笔记【Day02-上】
  • 【许晓笛】 EOS 智能合约案例解析(3)
  • GDB 调试 Mysql 实战(三)优先队列排序算法中的行记录长度统计是怎么来的(上)...
  • Hibernate最全面试题
  • HTTP传输编码增加了传输量,只为解决这一个问题 | 实用 HTTP
  • iOS动画编程-View动画[ 1 ] 基础View动画
  • iOS高仿微信项目、阴影圆角渐变色效果、卡片动画、波浪动画、路由框架等源码...
  • Redux 中间件分析
  • Vue--数据传输
  • 猴子数据域名防封接口降低小说被封的风险
  • 前端
  • 原生JS动态加载JS、CSS文件及代码脚本
  • 运行时添加log4j2的appender
  • 《天龙八部3D》Unity技术方案揭秘
  • hi-nginx-1.3.4编译安装
  • 蚂蚁金服CTO程立:真正的技术革命才刚刚开始
  • ​DB-Engines 12月数据库排名: PostgreSQL有望获得「2020年度数据库」荣誉?
  • ​软考-高级-系统架构设计师教程(清华第2版)【第15章 面向服务架构设计理论与实践(P527~554)-思维导图】​
  • #git 撤消对文件的更改
  • #include到底该写在哪
  • #LLM入门|Prompt#1.8_聊天机器人_Chatbot
  • #Z0458. 树的中心2
  • #图像处理
  • (01)ORB-SLAM2源码无死角解析-(56) 闭环线程→计算Sim3:理论推导(1)求解s,t
  • (2)关于RabbitMq 的 Topic Exchange 主题交换机
  • (Mac上)使用Python进行matplotlib 画图时,中文显示不出来
  • (分布式缓存)Redis哨兵
  • (含react-draggable库以及相关BUG如何解决)固定在左上方某盒子内(如按钮)添加可拖动功能,使用react hook语法实现
  • (经验分享)作为一名普通本科计算机专业学生,我大学四年到底走了多少弯路
  • (入门自用)--C++--抽象类--多态原理--虚表--1020
  • (十)Flink Table API 和 SQL 基本概念
  • (十二)devops持续集成开发——jenkins的全局工具配置之sonar qube环境安装及配置
  • (转)Scala的“=”符号简介
  • (转)visual stdio 书签功能介绍
  • (转)关于多人操作数据的处理策略
  • (转)自己动手搭建Nginx+memcache+xdebug+php运行环境绿色版 For windows版
  • ./include/caffe/util/cudnn.hpp: In function ‘const char* cudnnGetErrorString(cudnnStatus_t)’: ./incl
  • .[hudsonL@cock.li].mkp勒索加密数据库完美恢复---惜分飞