浅谈vue,angular,react数据双向绑定原理分析

传统做法

前端维护状态，手动操作dom更新视图。前端框架对服务器数据通过模版进行渲染。当用户产生了一个动作之后，我们通过document.getelementby... 手动进行dom更新。
框架帮忙分离数据和视图，后续状态更新需要手动操作dom，因为框架只管首次渲染，不追踪状态监听变化。

双向数据绑定

当我们在前端开发中采用mv*的模式时，m - model，指的是模型，也就是数据，v - view，指的是视图，也就是页面展现的部分。通常，我们需要编写代码，将从服务器获取的数据进行“渲染”，展现到视图上。每当数据有变更时，我们会再次进行渲染，从而更新视图，使得视图与数据保持一致。

页面也会通过用户的交互，产生状态、数据的变化，这个时候，我们则编写代码，将视图对数据的更新同步到数据，以致于同步到后台服务器。也就是

不同的前端 mv* 框架对于这种 model 和 view 间的数据同步有不同的处理。在 backbone 中，model 到 view 的数据传递，可以在 view 中监听 model 的 change 事件，每当 model 更新，view 中重新执行 render。而 view 到 model 的数据传递，可以监听 view 对应的 dom 元素的各种事件，在检测到 view 状态变更后，将变更的数据发送到 model（通过两边的监听事件）。相较于 backbone，angularjs 所代表的 mvvm 框架则更进一步，从框架层面支持这种数据同步机制，而且是双向数据绑定：

在不同的 mvvm 框架中，实现双向数据绑定的技术有所不同。

angularjs 采用“脏值检测”的方式，数据发生变更后，对于所有的数据和视图的绑定关系进行一次检测，识别是否有数据发生了改变，有变化进行处理，可能进一步引发其他数据的改变，所以这个过程可能会循环几次，一直到不再有数据变化发生后，将变更的数据发送到视图，更新页面展现。如果是手动对 viewmodel 的数据进行变更，为确保变更同步到视图，需要手动触发一次“脏值检测”。

vuejs 则使用 es5 提供的 object.defineproperty() 方法，监控对数据的操作，从而可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。

vue 双向数据绑定实现

数据与视图的绑定与同步，最终体现在对数据的读写处理过程中，也就是 object.defineproperty() 定义的数据 set、get 函数中。vue 中对于的函数为 definereactive，在精简版实现中，我只保留了一些基本特性：

  function definereactive(obj, key, value){
    var dep = new dep();
    object.defineproperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactgetter(){
        if(dep.target){
          dep.depend();
        }
        return value;
      },
      set: function reactsetter(newval){
        if (value === newval) {
          return;
        } else {
          value = newval;
          //如果数据发生改变，则通知所有的 watcher（借助 dep.notify()）
          dep.notify();
        }
      }
    })
  }

在对数据进行读取时，如果当前有 watcher（对数据的观察者，watcher 会负责将获取的新数据发送给视图），那将该 watcher 绑定到当前的数据上（dep.depend()，dep 关联当前数据和所有的 watcher 的依赖关系），是一个检查并记录依赖的过程。而在对数据进行赋值时，如果数据发生改变，则通知所有的 watcher（借助 dep.notify()）。这样，即便是我们手动改变了数据，框架也能够自动将数据同步到视图。

数据绑定关系的识别过程

vue 和 angularjs 中，都是通过在 html 中添加指令的方式，将视图元素与数据的绑定关系进行声明

  <form id="test">
    <input type="text" v-model="name">
  </form>

以上的 html 代码表示该 input 元素与 name 数据进行绑定。在 js 代码中可以这样进行初始化：

  var vm = new vue({
   el: '#test',
   data: {
    name: 'sysuzhyupeng'
   }
  })

代码正确执行后，页面上 input 元素对应的位置会显示上面代码中给出的初始值：sysuzhyupeng。

执行 vm.name = ‘zhyupeng' 后，页面上 input 也会更新为显示： zhyupeng。在页面文本框中修改内容为：yupeng，则通过vm.name 获取的值为：'yupeng'

react数据绑定

react采用这种方式，考虑虚拟dom树的更新：

1. 属性更新，组件自己处理
2. 结构更新，重新“渲染”子树（虚拟dom），找出最小改动步骤，打包dom操作，给真实dom树打补丁

单纯从数据绑定来看，react虚拟dom没有数据绑定，因为setstate()不维护上一个状态（状态丢弃），谈不上绑定

从数据更新机制来看，react类似于提供数据模型的方式（必须通过state更新）

没有双向数据绑定的话，input的双向场景要怎么实现？通过框架提供的api，手动通知数据变化，和操作dom的方式很像

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。