Vue.js 源码分析：响应式系统常见问题与解决方案

鲁日姝Hunter

798人浏览 · 2025-11-02 07:11:36

鲁日姝Hunter · 2025-11-02 07:11:36 发布

Vue.js 源码分析：响应式系统常见问题与解决方案

【免费下载链接】vue-analysis :thumbsup: Vue.js 源码分析项目地址: https://gitcode.com/gh_mirrors/vu/vue-analysis

响应式系统概述

Vue.js 的响应式系统是其核心特性之一，通过数据劫持实现视图与数据的双向绑定。该系统主要通过 Object.defineProperty 实现数据监听，相关源码位于 src/core/observer/index.js。在实际开发中，开发者常遇到对象属性添加、数组操作等无法触发响应式更新的问题，本文将从源码角度解析这些问题的解决方案。

对象添加属性问题

问题表现

使用 Object.defineProperty 实现响应式的对象，直接添加新属性无法触发 setter：

var vm = new Vue({
  data:{
    a:1
  }
})
// vm.b 是非响应的
vm.b = 2

解决方案：Vue.set

Vue 提供全局 API Vue.set 解决此问题，其定义位于 src/core/global-api/index.js：

Vue.set = set

set 方法实现逻辑位于 src/core/observer/index.js，核心步骤包括：

数组特殊处理：通过重写的 splice 方法触发响应
检查目标对象是否为响应式
将新属性定义为响应式并手动触发依赖通知

关键代码实现：

export function set (target: Array<any> | Object, key: any, val: any): any {
  // 数组处理逻辑
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key)
    target.splice(key, 1, val)
    return val
  }
  // 对象处理逻辑
  const ob = (target: any).__ob__
  if (!ob) {
    target[key] = val
    return val
  }
  defineReactive(ob.value, key, val)
  ob.dep.notify()
  return val
}

数组响应式问题

无法检测的数组操作

Vue 不能检测以下数组变动：

利用索引直接设置数组项：vm.items[index] = newValue
修改数组长度：vm.items.length = newLength

解决方案：重写数组方法

Vue 通过重写数组原型方法实现响应式，相关源码位于 src/core/observer/array.js。重写的方法包括：

push
pop
shift
unshift
splice
sort
reverse

重写逻辑示例：

methodsToPatch.forEach(function (method) {
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)
    ob.dep.notify()
    return result
  })
})

数组方法重写在 Observer 类构造函数中完成，位于 src/core/observer/index.js：

if (Array.isArray(value)) {
  const augment = hasProto
    ? protoAugment
    : copyAugment
  augment(value, arrayMethods, arrayKeys)
  this.observeArray(value)
}

响应式系统依赖收集

依赖收集机制

响应式系统通过 Dep 类实现依赖收集，相关代码位于 src/core/observer/dep.js。在 getter 过程中完成依赖收集：

get: function reactiveGetter () {
  const value = getter ? getter.call(obj) : val
  if (Dep.target) {
    dep.depend()
    if (childOb) {
      childOb.dep.depend()
      if (Array.isArray(value)) {
        dependArray(value)
      }
    }
  }
  return value
}

Watcher 与 Dep 关系

Watcher 类作为依赖收集的订阅者，与 Dep 形成发布-订阅模式。Watcher 源码位于 src/core/observer/watcher.js，负责在数据变化时触发更新。

实际应用中的最佳实践

1. 对象操作建议

初始化时声明所有响应式属性
使用 Vue.set 添加新属性：this.$set(this.obj, 'newProp', value)
使用 Object.assign 创建新对象：this.obj = Object.assign({}, this.obj, { newProp: value })