Angular双向数据绑定

更新日期: 2019-05-08阅读: 2.1k标签: 数据绑定

双向数据绑定: 所谓双向数据绑定是指View(视图)与Model(模型)之间的绑定:

  • View的改变: 通过界面交互使视图发生改变,如Input框的输入,Select元素的选择,scrollBar滚动,浏览器窗口大小改变等等。
  • Model的改变:  如在Ajax, promise, timeout等回调中对Model进行重新赋值,


在浏览器界面中,几乎所有的交互行为我们都可以通过监听其对应事件的方式去捕获,如onchange, onresize, onscroll...因此View => Model非常简单,两个字:事件。

angular中对事件监听进行了封装(如oninput=>(input)),举个栗子:  

<h1>Title is: {{title}}</h1>
<input type="text" (input)="valueChanged($event)">

Component中:

export class AppComponent {
 title = ''; 
  constructor(){
  }
  valueChanged(e){
    this.title = e.target.value;
  }
}

通过监听input事件,对title进行重新赋值,完成View=>Model过程。


上述demo中,title的值被实时更新到了h1标签中,这又是如何做到的呢?浏览器并不能主动感知到什么时候需要更新视图,需要Angular在合适的时刻告知它:“老兄,我组件里有一个数据的值变了,你帮忙更新一下视图呗。”

问题的核心在于及时告知, 在AngularJS中使用的是$digest循环进行脏值检测,通过检测scope下model的值是否有变动来判断是否需要更新视图。Angular中也是相似的原理,上述例子中,当valueChanged方法完成后,Angular立即进行了一遍脏值检测,发现title的值相较之前发生改变了!于是便跑去找浏览器请求更新视图,h1标签中的内容就被更新啦。

然而Angular对于脏值检测相较于AngularJS做了很大的改进,引入了Zone.js进行异步管理(不再需要手动执行$apply()),采用单向数据流,允许用户选择手动/自动检测模式...,提高了检测性能。


链接: https://fly63.com/article/detial/3246

vue在自定义组件中使用v-model进行数据绑定

有这么一句话: 默认情况下,一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event。先来一个组件,不用vue-model,正常父子通信;点击回应后,父亲对儿子说的话变成了儿子的回应。儿子收到的信息也变了,实现通信。

Nautil 中使用双向数据绑定

虽然是基于 react 的框架,但是在 nautil 中可以使用双向数据绑定,这得益于基于观察者模式的开发思路。在 react 中使用双向绑定并非没有需求,react 严格的单向数据流,严重影响了开发者的发挥空间,特别是在表单组件的使用中

组件使用v-model、$listeners、.sync(区别于v-model的双向数据绑定)

首先我们先说一下在自定义组件中使用v-model的必要条件,在自定义的组件中要有input(这里我们先不讨论单选复选框),在自定义组件的模板对象中要有props属性,且里面要含有一个value

Vue的双向数据绑定原理

Object属性分为两个类型:数据属性、访问器属性,每类属性又有其不同的特显,双向绑定的原理是根据其访问器属性的特性来实现的。Configurable:是否可以通过delete删除,能否修改他的属性特性,能否修改为访问器属性。默认值true

不要再搞混Vue的响应式原理和双向数据绑定了

之前公司招人,面试了一些的前端同学,因为公司使用的前端技术是 Vue ,所以免不了问到其响应式原理和 Vue 的双向数据绑定。但是这边面试到的80%的同学会把两者搞混,通常我要是先问响应式原理再问双向数据绑定原理,来面试的同学大都会认为是一回事

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!