Vue2 响应式系统 - Stellar Observer Protocol

1524 字

8 分钟

Vue2 响应式系统

2025-08-23

Code

前端

/

/

响应式系统

/

手写代码

题目描述#

实现 Vue2 的核心响应式系统，要求：

使用 Object.defineProperty 实现数据劫持
实现依赖收集（Dep）和依赖触发（Watcher）机制
支持嵌套对象的深层响应式处理
实现数组方法的劫持（push/pop/shift/unshift/splice/sort/reverse）
处理属性新增和删除的响应式更新
实现计算属性和侦听器基础功能

要求完整实现响应式逻辑，并通过测试用例验证。

解题思路#

数据劫持：递归使用 Object.defineProperty 劫持对象属性
依赖收集：在 getter 中收集依赖（Dep -> Watcher）
依赖触发：在 setter 中通知变更（Watcher.update）
数组处理：拦截数组变异方法并手动触发更新
嵌套对象：递归处理对象属性实现深层响应
计算属性：基于 Watcher 实现惰性求值

关键洞察#

响应式核心：通过 getter/setter 实现数据变化侦测
依赖追踪：Dep 收集 Watcher，Watcher 订阅 Dep
数组劫持：重写数组原型方法触发更新
深层监听：递归处理嵌套对象属性
惰性计算：计算属性缓存机制避免重复计算
批量更新：异步更新队列避免重复渲染

代码流程#

flowchart TD 
	A[Observer 监听数据] --> B{数据类型} 
	B -->|对象| C[递归 defineProperty] 
	B -->|数组| D[重写数组方法] 
	C --> E[getter 收集依赖] 
	E --> F[Dep 添加 Watcher] 
	D --> G[手动触发更新] 
	H[数据变更] --> I[setter 通知 Dep] 
	I --> J[Watcher 更新] 
	J --> K[执行视图更新]

代码实现#

1
// 依赖收集器
2
class Dep {
3
  constructor() {
4
    this.subs = new Set();
5
  }
6

7
  addSub(sub) {
8
    this.subs.add(sub);
9
  }
10

11
  removeSub(sub) {
12
    this.subs.delete(sub);
13
  }
14

15
  depend() {
16
    if (Dep.target) {
17
      Dep.target.addDep(this);
18
    }
19
  }
20

21
  notify() {
22
    const subs = [...this.subs];
23
    subs.forEach(sub => sub.update());
24
  }
25
}
26

27
Dep.target = null;
28
const targetStack = [];
29

30
function pushTarget(target) {
31
  targetStack.push(target);
32
  Dep.target = target;
33
}
34

35
function popTarget() {
36
  targetStack.pop();
37
  Dep.target = targetStack[targetStack.length - 1];
38
}
39

40
// 观察者
41
class Watcher {
42
  constructor(vm, expOrFn, cb, options) {
43
    this.vm = vm;
44
    this.cb = cb;
45
    this.deps = new Set();
46
    this.depIds = new Set();
47
    this.getter = typeof expOrFn === 'function'
48
      ? expOrFn
49
      : () => vm[expOrFn];
50

51
    if (options) {
52
      this.lazy = !!options.lazy;
53
    }
54

55
    this.value = this.lazy ? undefined : this.get();
56
  }
57

58
  get() {
59
    pushTarget(this);
60
    const value = this.getter.call(this.vm);
61
    popTarget();
62
    return value;
63
  }
64

65
  addDep(dep) {
66
    if (!this.depIds.has(dep.id)) {
67
      this.depIds.add(dep.id);
68
      this.deps.add(dep);
69
      dep.addSub(this);
70
    }
71
  }
72

73
  update() {
74
    if (this.lazy) {
75
      this.dirty = true;
76
    } else {
77
      queueWatcher(this);
78
    }
79
  }
80

81
  run() {
82
    const value = this.get();
83
    const oldValue = this.value;
84
    this.value = value;
85
    this.cb.call(this.vm, value, oldValue);
86
  }
87
}
88

89
// 异步更新队列
90
let queue = [];
91
let flushing = false;
92
let waiting = false;
93

94
function queueWatcher(watcher) {
95
  if (!queue.includes(watcher)) {
96
    queue.push(watcher);
97
  }
98

99
  if (!waiting) {
100
    waiting = true;
101
    nextTick(flushQueue);
102
  }
103
}
104

105
function flushQueue() {
106
  flushing = true;
107
  queue.forEach(w => w.run());
108
  queue = [];
109
  flushing = false;
110
  waiting = false;
111
}
112

113
// 将数组方法转换为响应式
114
const arrayProto = Array.prototype;
115
const arrayMethods = Object.create(arrayProto);
116

117
['push', 'pop', 'shift', 'unshift', 'splice', 'sort', 'reverse'].forEach(method => {
118
  const original = arrayProto[method];
119

120
  arrayMethods[method] = function(...args) {
121
    const result = original.apply(this, args);
122
    const ob = this.__ob__;
123

124
    // 处理新增元素
125
    let inserted;
126
    switch (method) {
127
      case 'push':
128
      case 'unshift':
129
        inserted = args;
130
        break;
131
      case 'splice':
132
        inserted = args.slice(2);
133
        break;
134
    }
135

136
    if (inserted) ob.observeArray(inserted);
137
    ob.dep.notify();
138
    return result;
139
  };
140
});
141

142
// 观察者类
143
class Observer {
144
  constructor(value) {
145
    this.value = value;
146
    this.dep = new Dep();
147

148
    def(value, '__ob__', this);
149

150
    if (Array.isArray(value)) {
151
      value.__proto__ = arrayMethods;
152
      this.observeArray(value);
153
    } else {
154
      this.walk(value);
155
    }
156
  }
157

158
  walk(obj) {
159
    Object.keys(obj).forEach(key => {
160
      defineReactive(obj, key, obj[key]);
161
    });
162
  }
163

164
  observeArray(items) {
165
    items.forEach(item => observe(item));
166
  }
167
}
168

169
// 响应式绑定
170
function defineReactive(obj, key, val) {
171
  const dep = new Dep();
172
  let childOb = observe(val);
173

174
  Object.defineProperty(obj, key, {
175
    enumerable: true,
176
    configurable: true,
177
    get() {
178
      if (Dep.target) {
179
        dep.depend();
180
        if (childOb) {
181
          childOb.dep.depend();
182

183
          // 数组依赖收集
184
          if (Array.isArray(val)) {
185
            dependArray(val);
186
          }
187
        }
188
      }
189
      return val;
190
    },
191
    set(newVal) {
192
      if (newVal === val) return;
193
      val = newVal;
194
      childOb = observe(newVal);
195
      dep.notify();
196
    }
197
  });
198
}
199

200
function dependArray(value) {
201
  for (let i = 0, l = value.length; i < l; i++) {
202
    const e = value[i];
203
    e && e.__ob__ && e.__ob__.dep.depend();
204
    if (Array.isArray(e)) {
205
      dependArray(e);
206
    }
207
  }
208
}
209

210
function observe(value) {
211
  if (!value || typeof value !== 'object') return;
212
  return new Observer(value);
213
}
214

215
// Vue 实例简化版
216
class Vue {
217
  constructor(options) {
218
    this.$options = options;
219
    this._data = options.data;
220

221
    // 数据响应化
222
    observe(this._data);
223

224
    // 代理data到实例
225
    Object.keys(this._data).forEach(key => {
226
      proxy(this, '_data', key);
227
    });
228
  }
229

230
  $watch(expOrFn, cb) {
231
    return new Watcher(this, expOrFn, cb);
232
  }
233
}
234

235
// 数据代理
236
function proxy(target, sourceKey, key) {
237
  Object.defineProperty(target, key, {
238
    get() {
239
      return target[sourceKey][key];
240
    },
241
    set(newVal) {
242
      target[sourceKey][key] = newVal;
243
    }
244
  });
245
}
246

247
// 计算属性实现
248
function computed(getter) {
249
  const watcher = new Watcher(this, getter, null, { lazy: true });
250

251
  Object.defineProperty(this, key, {
252
    get() {
253
      if (watcher.dirty) {
254
        watcher.evaluate();
255
      }
256
      return watcher.value;
257
    }
258
  });
259
}
260

261
// 下一个tick实现
262
function nextTick(cb) {
263
  const timerFn = () => {
264
    cb();
265
  };
266

267
  if (typeof Promise !== 'undefined') {
268
    Promise.resolve().then(timerFn);
269
  } else if (typeof MutationObserver !== 'undefined') {
270
    const observer = new MutationObserver(timerFn);
271
    const textNode = document.createTextNode('1');
272
    observer.observe(textNode, { characterData: true });
273
    textNode.data = '2';
274
  } else {
275
    setTimeout(timerFn, 0);
276
  }
277
}

使用示例#

1
// 创建Vue实例
2
const vm = new Vue({
3
  data: {
4
    count: 0,
5
    items: [1, 2, 3],
6
    person: {
7
      name: 'Alice',
8
      age: 30
9
    }
10
  }
11
});
12

13
// 监听数据变化
14
vm.$watch('count', (newVal, oldVal) => {
15
  console.log(`Count changed from ${oldVal} to ${newVal}`);
16
});
17

18
// 监听数组变化
19
vm.$watch(() => vm.items.length, (newLen, oldLen) => {
20
  console.log(`Array length changed from ${oldLen} to ${newLen}`);
21
});
22

23
// 测试响应式
24
vm.count++; // 输出: Count changed from 0 to 1
25

26
// 测试数组响应式
27
vm.items.push(4); // 输出: Array length changed from 3 to 4
28

29
// 测试嵌套对象
30
vm.person.age = 31; // 触发更新
31

32
// 测试新增属性（需要特殊处理）
33
// Vue2 需要使用 Vue.set 或 this.$set
34
Vue.set(vm.person, 'job', 'Engineer');
35

36
// 测试计算属性
37
vm.computed = computed(() => vm.count * 2);
38
console.log(vm.computed); // 2 (vm.count=1)
39
vm.count++;
40
console.log(vm.computed); // 4

业务场景#

数据绑定：表单输入与状态实时同步
复杂状态管理：Vue组件内部状态响应式更新
列表渲染：数组变化时自动更新DOM列表
计算属性：基于其他状态自动计算派生值
侦听器：监听数据变化执行特定逻辑
状态依赖：组件间状态自动同步更新

设计挑战：

对象属性新增/删除需要通过 Vue.set/Vue.delete 处理

数组变化检测需要重写原型方法

深层嵌套对象需要递归处理

异步更新队列防止重复渲染

计算属性的缓存优化机制

相似题目#

Vue3 响应式实现（困难）核心：Proxy 代替 Object.defineProperty
React Hooks 实现（困难）核心：闭包 + 链表管理状态
实现观察者模式（中等）核心：Subject/Observer 接口实现
实现 Promise A+规范（困难）核心：状态机 + 异步回调队列
实现前端路由系统（中等）核心：History API + 组件切换

设计局限与解决方案：

flowchart LR 
	A[Object.defineProperty局限] --> B[无法检测对象属性添加/删除] 
	A --> C[无法检测数组索引变更] 
	A --> D[性能消耗较大] 
	B --> E[Vue.set/Vue.delete API] 
	C --> F[数组方法重写] 
	D --> G[Vue3改用Proxy]