返回

Vue源码刨根问底：双向绑定原理大揭秘，数据劫持和发布订阅尽收眼底！

前端

最近一段时间，我一直在潜心研究Vue源码，并在我的GitHub仓库中整理了许多相关的文章。今天，我们一起来学习Vue的双向绑定原理，也就是数据劫持和发布订阅。本文将带您深入了解Vue是如何实现数据驱动视图的，并分享一些来自Vue源码的真实案例。

Vue的双向绑定是其最核心的特性之一，它允许您在数据和视图之间建立实时连接，从而实现数据的动态更新。为了实现双向绑定，Vue使用了数据劫持和发布订阅两种技术。

数据劫持

数据劫持是一种将数据对象转换为响应式对象的技术。响应式对象是指当它的属性值发生变化时，能够自动通知相关联的视图进行更新。

Vue通过Object.defineProperty()方法对数据对象的属性进行劫持，当属性值发生变化时，会触发对应的setter方法，从而通知视图进行更新。

Object.defineProperty(data, 'name', {
  get: function() {
    return this._name;
  },
  set: function(newVal) {
    this._name = newVal;
    this.$emit('name-changed', newVal);
  }
});

在这个例子中，当name属性的值发生变化时，setter方法会被触发，它将新的值存储到_name属性中，并触发name-changed事件。视图可以通过监听name-changed事件来更新自己。

发布订阅

发布订阅是一种设计模式，它允许对象之间进行通信，而无需它们之间存在直接的依赖关系。

在Vue中，当数据对象发生变化时，它会发布一个事件，视图可以通过订阅这个事件来更新自己。

this.$on('name-changed', function(newVal) {
  this.name = newVal;
});

在这个例子中，视图通过监听name-changed事件来更新自己的name属性。

Vue的双向绑定就是通过数据劫持和发布订阅这两种技术来实现的。通过将数据对象转换为响应式对象，并使用发布订阅机制来通知视图更新，Vue实现了数据与视图之间的实时连接。

希望这篇文章能够帮助您更好地理解Vue的双向绑定原理。如果您还有其他问题，欢迎在评论区留言。

其他资源