双向数据绑定和单项数据绑定的认识

  

参考文章:

https://segmentfault.com/q/1010000002511449/a-1020000002514653

https://www.zhihu.com/question/49964363/answer/136022879

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

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

双向数据绑定:数据模型(Module)和视图(View)之间的双向绑定。

用户在视图上的修改会自动同步到数据模型中去,同样的,如果数据模型中的值发生了变化,也会立刻同步到视图中去。
双向数据绑定的优点是无需进行和单向数据绑定的那些CRUD(Create,Retrieve,Update,Delete)操作
双向数据绑定最经常的应用场景就是表单了,这样当用户在前端页面完成输入后,不用任何操作,我们就已经拿到了用户的数据存放到数据模型中了。
目前。实现双向数据绑定的前端框架主要有AngularJS,VueJS(通过引入vuex来实现单项的数据监控)等

大名鼎鼎的angular实现双向绑定的原理就是通过$watch来进行脏检查,但是这种脏效率很如果是大量的检查那就不敢想象了。

单项数据和双向数据使用的场景

单向绑定的优点是相应的可以带来单向数据流,这样做的好处是所有状态变化都可以被记录、跟踪,状态变化通过手动调用通知,源头易追溯,没有“暗箱操作”。同时组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性。缺点则是代码量会相应的上升,数据的流转过程变长,从而出现很多类似的样板代码。同时由于对应用状态独立管理的严格要求(单一的全局store),在处理局部状态较多的场景时(如用户输入交互较多的“富表单型”应用),会显得啰嗦及繁琐。

基本上双向绑定的优缺点就是单向绑定的镜像了。优点是在表单交互较多的场景下,会简化大量业务无关的代码。缺点就是由于都是“暗箱操作”,我们无法追踪局部状态的变化(虽然大部分情况下我们并不关心),潜在的行为太多也增加了出错时 debug 的难度。同时由于组件数据变化来源入口变得可能不止一个,新手玩家很容易将数据流转方向弄得紊乱,如果再缺乏一些“管制”手段,最后就很容易因为一处错误操作造成应用雪崩。

最后总结我们要通过自己的业务场景合理的选择

时间: 2024-10-15 09:50:53

双向数据绑定和单项数据绑定的认识的相关文章

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

在react中是单向数据绑定,而在vue和augular中的特色是双向数据绑定.为什么会选择两种不同的机制呢?我猜测是两种不同的机制有不同的适应场景,查了一些资料后,总结一下. 一.各自优势 双向数据绑定给人的最大的优越感就是方便.当数据data发生变化时,页面自动发生更新.但是有一个缺点也是因为自动更新而导致的,因为这样你就不知道data什么时候变了,也不知道是谁变了,变化后也不会通知你,当然你可以watch来监听data的变化,但是这变复杂了,还不如单向数据绑定. 所以说按照方神的说法:Vu

表单数据绑定(编辑页面的数据绑定)

本章介绍如何在生成表单后,将一个model的数据展示到form表单中(一般用于编辑页面) 代码如下(连接地址:https://github.com/xiexingen/Bootstrap-SmartForm/blob/master/demo/form4-initData.html): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <t

angularJs初体验,实现双向数据绑定!使用体会:比较爽

使用初体验:ng 双向数据绑定: 最简单的双向数据绑定:(使用默认模块控制) <body ng-app> <input type="text" ng-model='ngName'> <h1>{{ngName}}</h1> </body> 完成对数据的初始化: //初始化原理:ng-app 初始完之后,就会往在ng-init里面赋值一个初始值:world , 这个值会自动绑定到下面 : <body ng-app ng-in

动态数据绑定之监听对象变化

---恢复内容开始--- 动态数据绑定是MVVM框架中最基础的的一个功能,简单描述就是:将数据和视图进行绑定,当数据发生改变时,视图随之改变,更深层次一点,数据绑定包括单向数据绑定和双向数据绑定. 本文从数据绑定中的问题出发,一步一步的来实现这个功能. 本文的所有的源代码地址: 点击此处查看源代码 问题一 给定任意一个对象,如何监听其属性的读取与变化?也就是说,如何知道程序访问了对象的哪个属性,又改变了哪个属性? 举个例子: let app = new Observer({ name: 'liu

ASP.NET中数据绑定表达式

今天谈下.NET中的数据绑定表达式.数据绑定表达式必须包含在<%#和%>字符之间.格式如下: <tagprefix:tagname property='<%# data-binding expression %>' runat="server" /> 或者如下: <%# data-binding expression %> ASP.NET 支持分层数据绑定模型,数据绑定表达式使用 Eval 和 Bind 方法将数据绑定到控件,并将更改提交

WPF的数据绑定详细介绍

数据绑定:是应用程序 UI 与业务逻辑之间建立连接的过程. 如果绑定正确设置并且数据提供正确通知,则当数据的值发生更改时,绑定到数据的视觉元素会自动反映更改. 数据绑定可能还意味着如果视觉元素中数据的外部表现形式发生更改,则基础数据可以自动更新以反映更改. 一.WPF数据绑定的概要 数据绑定:是应用程序 UI 与业务逻辑之间建立连接的过程. 如果绑定正确设置并且数据提供正确通知,则当数据的值发生更改时,绑定到数据的视觉元素会自动反映更改. 数据绑定可能还意味着如果视觉元素中数据的外部表现形式发生

MVVM 架构与数据绑定库

Model-View-Presenter(MVP),即模型-视图-表示层,架构被广泛应用于 Android 应用程序,通过引入表示层将视图与表示逻辑和模型分离.Model-View-ViewModel(MVVM),即模型-视图-视图模型,与 MVP 非常相似,视图模型充当增强的表示层,使用数据绑定器保持视图模型和视图同步.通过将视图绑定到视图模型属性上,数据绑定程序可以处理视图更新而无需手动更改数据来设置视图(例如,不用再设置控件 TextView 的setTest() 或者 setVisibi

vue(原理)_数据绑定

一.前言 1.数据绑定原理 2.在数据绑定中四个重要的对象                              3.具体实现                                                   3.1初始化阶段                                                   3.2建立Dep和watcher的联系阶段                                                   3.3

Note7:MVVM模式之数据绑定

一.资源说明 (1)本文参考自: 一步步走进WPF的MVVM模式(二):数据绑定 WPF之数据绑定总结 二.正文 数据绑定 (Data Binding)是WPF最重要的特性之一,也是实现 MVVM(WPF) 模式的一大支柱. 简而言之,数据绑定就是将两个属性绑定在一起,源属性(source)改变带动目标属性(target)一起改变.这样也减少了事件(Events)的使用. 绑定源可以是任意对象的属性,而目标必须是依赖对象的依赖属性. 绑定源主要分为以下几种场景(后面主要介绍前两种): (1)依赖