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

SM-xiao

于 2020-12-30 16:54:41 发布

阅读量134

点赞数 1

分类专栏： js vue

本文链接：https://blog.youkuaiyun.com/qq_37385086/article/details/103639187

版权

js 同时被 2 个专栏收录

8 篇文章

订阅专栏

vue

1 篇文章

订阅专栏

本文深入探讨了Vue2.0中的响应式原理，主要依赖于Object.defineProperty进行数据劫持，并结合观察者模式实现数据双向绑定。通过创建Dep类作为主题对象，维护订阅者列表，并定义notify方法通知所有订阅者更新。同时，定义Sub类作为订阅者，包含update方法用于执行更新操作。通过实例化Dep和Sub，模拟了一个简单的数据发布和订阅过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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(); //发布者发布更新