浅谈实现vue2.0响应式的基本思路

最近看了vue2.0源码关于响应式的实现，以下博文将通过简单的代码还原vue2.0关于响应式的实现思路。

注意，这里只是实现思路的还原，对于里面各种细节的实现，比如说数组里面数据的操作的监听，以及对象嵌套这些细节本实例都不会涉及到，如果想了解更加细节的实现，可以通过阅读源码 observer文件夹以及instance文件夹里面的state文件具体了解。

首先，我们先定义好实现vue对象的结构

class Vue {  constructor(options) {    this.$options = options;    this._data = options.data;    this.$el = document.querySelector(options.el);  }} 

第一步：将data下面的属性变为observable

使用Object.defineProperty对数据对象做属性get和set的监听，当有数据读取和赋值操作时则调用节点的指令，这样使用最通用的=等号赋值就可以触发了。

//数据劫持，监控数据变化function observer(value, cb){ Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb))}function defineReactive(obj, key, val, cb) { Object.defineProperty(obj, key, {  enumerable: true,  configurable: true,  get: ()=>{   return val  },  set: newVal => {   if(newVal === val)    return   val = newVal  } })} 

第二步：实现一个消息订阅器

很简单，我们维护一个数组，这个数组，就放订阅者，一旦触发notify，订阅者就调用自己的update方法

class Dep { constructor() {  this.subs = [] } add(watcher) {  this.subs.push(watcher) } notify() {  this.subs.forEach((watcher) => watcher.cb()) }} 

每次set函数，调用的时候，我们触发notify，实现更新

那么问题来了。谁是订阅者。对，是Watcher。。一旦 dep.notify()就遍历订阅者，也就是Watcher，并调用他的update()方法

function defineReactive(obj, key, val, cb) { const dep = new Dep() Object.defineProperty(obj, key, {  enumerable: true,  configurable: true,  get: ()=>{   return val  },  set: newVal => {   if(newVal === val)    return   val = newVal   dep.notify()  } })} 

第三步：实现一个 Watcher

Watcher的实现比较简单，其实就是执行数据变化时我们要执行的操作

class Watcher { constructor(vm, cb) {  this.cb = cb  this.vm = vm } update(){  this.run() } run(){  this.cb.call(this.vm) } }

第四步：touch拿到依赖

上述三步，我们实现了数据改变可以触发更新，现在问题是我们无法将watcher与我们的数据联系到一起。

我们知道data上的属性设置defineReactive后，修改data 上的值会触发 set。那么我们取data上值是会触发 get了。所以可以利用这一点，先执行以下render函数，就可以知道视图的更新需要哪些数据的支持，并把它记录为数据的订阅者。