常见的实现MVVM方式:发布者-订阅者模式,脏值检查,数据劫持

开发工具

  问题:常见的实现数据绑定的做法有哪些?

  实现数据绑定的做法有大致如下几种:

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

  脏值检查(angular.js)

  数据劫持(vue.js)

  1、发布者-订阅者模式:

  一般通过sub,pub的方式实现数据和视图的绑定监听,

  更新数据方式通常做法是 vm.set(property, value)。

  这种方式现在毕竟太low了,我们更希望通过 vm.property = value这种方式更新数据,同时自动更新视图,于是有了下面两种方式。

  2、脏值检查:

  angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,

  最简单的方式就是通过 setInterval() 定时轮询检测数据变动,

  angular只有在指定的事件触发时进入脏值检测,大致如下:

  1、DOM事件,譬如用户输入文本,点击按钮等。( ng-click )2、XHR响应事件 ( $http )3、浏览器Location变更事件 ( $location )4、Timer事件( $timeout , $interval )5、执行 $digest() 或 $apply()3、数据劫持:

  vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,

  通过Object.defineProperty()来劫持各个属性的setter,getter,

  在数据变动时发布消息给订阅者,触发相应的监听回调。

  (补充:在Vue3.0放弃了Object.defineProperty(),采用原生Proxy对象)

标签: 开发工具