几种实现双向绑定的做法

作者: 琪先生_zZ | 来源:发表于2018-05-10 15:21 被阅读92次

目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素(input、textare等)添加了change(input)事件,来动态修改model和 view,并没有多高深。所以无需太过介怀是实现的单向或双向绑定。

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

发布者-订阅者模式(backbone.js)
脏值检查(angular.js)
数据劫持(vue.js)

发布者-订阅者模式: 一般通过sub, pub的方式实现数据和视图的绑定监听,更新数据方式通常做法是 vm.set('property', value),这里有篇文章讲的比较详细,有兴趣可点这里

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

脏值检查: angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,最简单的方式就是通过 setInterval() 定时轮询检测数据变动,当然Google不会这么low,angular只有在指定的事件触发时进入脏值检测,大致如下:

  • DOM事件,譬如用户输入文本,点击按钮等。( ng-click )
  • XHR响应事件 ( $http )
  • 浏览器Location变更事件 ( $location )
  • Timer事件( $timeout , $interval )
  • 执行 $digest() 或 $apply()

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

相关文章

  • vue双向数据绑定

    剖析Vue原理、实现双向绑定MVVM 几种实现双向绑定的做法 目前几种主流的mvc(vm)框架都实现了单向数据绑定...

  • Vue.js双向绑定的实现

    一、几种实现双向绑定的做法 目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是...

  • Vue原理及双向数据绑定

    几种实现双向绑定的做法 目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单...

  • 剖析Vue原理&实现双向绑定MVVM

    1、了解vue的双向数据绑定原理以及核心代码模块 2、缓解好奇心的同时了解如何实现双向绑定 几种实现双向绑定的做法...

  • Vue响应式原理

    几种双向绑定的做法目前几种主流的mvc(vm)框架都实现了单向数据绑定,我认为的双向数据绑定其实就是在单向绑定的基...

  • vuejs如何实现数据双向绑定 与 Object.defineP

    vuejs如何实现数据双向绑定 实现数据绑定的做法有大致如下几种: 发布者-订阅者模式(backbone.js)脏...

  • 几种实现双向绑定的做法

    目前几种主流的mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元...

  • 简析vue实现原理

    本文学习自https://github.com/DMQ/mvvm,建议大家去阅读原文。 几种实现双向绑定的做法 目...

  • 前端框架:3种常用框架实现原理

    几种实现双向绑定的做法 发布者-订阅者模式(backbone.js): 一般通过sub, pub的方式实现数据和视...

  • Vue2.0原理与MVVM的实现

    剖析Vue原理&实现双向绑定MVVM vue源码 双向绑定 -- MVVM 目前几种主流的MVC框架都实现了单向数...

网友评论

    本文标题:几种实现双向绑定的做法

    本文链接:https://www.haomeiwen.com/subject/kkorcftx.html