Vue双向数据绑定

0 引言

  实现双向数据绑定的方法有:

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

  2.脏值检查(Angular)

  3.数据劫持(vue)

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

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

   Angular的脏值检测只在指定的事件触发时进入脏值检测

  <1>DOM事件,比如用户输入文本,点击按钮等

  <2>XHR响应事件

  <3>浏览器location变更事件

  <4> Timer事件($timeout,$interval)

  <5> 执行$digest()或者$apply()。

2  Vue的双向数据绑定。

    Vue采用数据劫持结合发布者--订阅者的模式实现双向数据绑定。

    通过Object.defineProperty()方法来劫持各个属性的setter,getter在数据变动时发布消息给订阅者,触发响应的监听回调。

      

    2.1 实现一个数据监听器observer,能够对数据对象的所有属性进行监听,如有变动可取最新值并通知订阅者。

    2.2 实现一个指令解析器 compile,对每个元素的节点指令进行扫描和解析,根据指令模板替换数据,以绑定相应的更新函数。

    2.3 实现一个watcher,作为连接observer和compile的桥梁,能够订阅并收集每个属性变动的通知,执行指令绑定相应的回调函数,从而更新视图。

    2.4 MVVM入口函数,整合以上三者。

3 利用Object.defineProperty()来监听属性变动

    将需要observer的数据对象进行递归遍历,包括子属性对象的属性,都添加上setter和gertter。这样对对象的某个属性赋值,就会触发setter,那么就能监听到数据的变化了。

 

原文地址:https://www.cnblogs.com/wust-hy/p/7687638.html