浅析vue数据绑定

前言：最近团队需要做一个分享，脚进脑子，不知如何分享。最后想着之前一直想研究一下 vue 源码，今天刚好 “借此机会” 研究一下。

网上研究vue数据绑定的文章已经非常多了，但是自己写一遍，敲一遍demo和看别人的文章是完全不同的，so……搬运工来了

目前数据绑定主要有以下三种实现方式：

1.   脏值检查（angular.js）    轮询检测数据变化

DOM事件，譬如用户输入文本，点击按钮等。( ng-click )

2、Object.defineProperty劫持对象的get、set，从而实现对数据的监控。 （vue）

3、发布／订阅者模式实现数据与视图的自动同步

Object.defineProperty的优点

Object.defineProperty的用法

var a = {};
Object.defineProperty(a, "b", {
  set: function (newValue) {
  console.log("我被赋值了！" + newValue);
  },
  get: function () {
  console.log("我被取值了！");
  return 2  }
})
a.b = 3; //我被赋值了！
console.log(a.b); //我被取值了! //打印 2

由上面的例子看出，Object.defineProperty  传人3个参数

第一个： a对象

第二个： a对象里面的b属性

第三个： 属性比较多，列举有用的 value，set，get，configurable

数据绑定原理：

1、实现一个数据监听器Observer，对数据对象的所有属性进行监听，如有变动则拿到最新值并通知 dep数组

2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据

3、实现一个dep数组 ，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，更新视图

1. 实现observer

var data = {name: 'beidan'};
observe(data);
data.name = 'test'; // 监听到值变化了 beidan 变成 test

function observe(data) {
  if (!data || typeof data !== 'object') {
  return;
  }
  // 取出所有属性遍历
  Object.keys(data).forEach(function(key) {
   defineReactive(data, key, data[key]);
 });}