vue2数据劫持源码剖析

Vue2 数据劫持是其响应式系统的核心机制，它使得数据变化时能够自动触发视图更新，实现数据和视图的双向绑定。在Vue2中，这一机制主要通过`Object.defineProperty`来实现。下面我们将深入探讨这个过程。 Vue在初始化实例时，会对传入的data对象进行深度遍历，利用`Object.defineProperty`将每个属性转化为可监听的数据。`Object.defineProperty`可以设置getter和setter，当读取或修改属性时，会触发对应的getter和setter方法。这样，当数据发生变化时，Vue就能捕获到这一变化。 在Vue中，这个过程发生在`_observe`函数中，该函数接收一个对象并返回一个新的Observer实例。Observer实例会递归地处理对象的所有属性，为它们定义getter和setter。例如，对于对象`{a: 1}`，Vue会执行如下操作： ```javascript let observer = new Observer(data); Object.defineProperty(data, 'a', { get() { // 触发依赖收集 Dep.target && Dep.target.addDep(this); return this._value; }, set(newValue) { if (this._value === newValue) return; // 触发setter，通知所有依赖更新 this._value = newValue; this.notify(); // 通知订阅者更新 } }); ``` 这里的`Dep.target`是用来保存当前正在执行的Watcher实例，当访问属性时，会将Watcher添加到对应的Dep中（即依赖收集）。而当setter被调用时，会通知所有依赖，即所有的Watcher进行更新。 对于数组，Vue2还需要处理更复杂的情况，因为JavaScript的数组方法如`push`、`pop`、`splice`等并不会触发setter。为此，Vue2重写了这些方法，确保在执行过程中触发表达式的setter，从而更新视图。例如，Vue的`Array.prototype.push`如下： ```javascript Array.prototype._push = Array.prototype.push; Array.prototype.push = function(...items) { let addedCount = this._push(...items); this.$notify(); return addedCount; }; ``` `$notify`会触发数组的setter，通知所有依赖数组的Watcher更新。 Vue2的响应式系统还涉及到Watcher、Dep和Compile等关键组件。Watcher是数据和视图之间的桥梁，负责在数据变化时执行相应的更新操作。Dep是依赖管理器，用于收集和通知依赖。Compile则是负责解析模板，创建对应的Watcher实例。 Vue2的数据劫持通过`Object.defineProperty`实现数据的监听，结合Dep和Watcher机制，确保了数据变化时视图的同步更新。数组的处理则通过重写数组方法来完成，以兼容其原生操作。这样的设计使得Vue2能够高效地处理大量数据的变化，并保持视图的实时性。