结合源码解析-vue响应式原理

vue响应式原理

在之前vue2.0中，vue的响应式原理主要是基于Object.defineProperty进行数据劫持然后结合观察者模式(发布订阅模式)来实现数据的双向绑定。

function Dep() {//主题对象
  this.subs = []; //订阅者列表
}
Dep.prototype.notify = function() { //主题对象通知订阅者
  this.subs.forEach(function(sub){ //遍历所有的订阅者，执行订阅者提供的更新方法
    sub.update();
  });
}
function Sub(x) { //订阅者
  this.x = x;
}、
Sub.prototype.update = function() { //订阅者更新
  this.x = this.x * this.x;
  console.log(this.x);
}
var pub = { //发布者
  publish: function() {
    dep.notify();
  }
};
var dep = new Dep(); //主题对象实例
Array.prototype.push.call(dep.subs, new Sub(1), new Sub(2), new Sub(3)); //新增 3 个订阅者
pub.publish(); //发布者发布更新