MVVM响应式原理

165 阅读1分钟

几种实现双向绑定的做法

双向数据绑定其实是在单项绑定的基础上给可输入元素(input),添加了change(input)事件来动态修改model和view。

数据 => 视图 视图 => 数据

实现数据绑定的几种做法

1.发布者-订阅者模式(backbone.js)

sub、pub方式实现数据和视图的绑定监听,vm.set('property',value)

2.脏值检查(angulas.js)

对比数据是否有变更,来决定是否更新视图,最简单的方式通过setInterval()定时轮询检测数据变动。angular只有在制定的事件触发时进入脏值检测

  1. DOM事件(输入文本、点击按钮)
  2. XHR响应事件
  3. 浏览器Location变更事件
  4. Timer事件
  5. 执行digest()digest()、apply()

3.数据劫持(重要!)

vue.js采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变更时发布消息给订阅者,触发响应的监听回调