Vue 源码分析：深入响应式原理

最新推荐文章于 2026-06-25 18:20:41 发布

原创最新推荐文章于 2026-06-25 18:20:41 发布 · 1.2k 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #前端 #javascript

好的，这是一篇关于 Vue 源码分析的博客文章，主题是 Vue 的响应式原理。

Vue 源码分析：深入响应式原理

Vue.js 以其简洁的 API 和强大的功能，成为了前端开发的热门选择。其中，响应式系统是 Vue 的核心特性之一。了解 Vue 的响应式原理，可以帮助我们更好地理解 Vue 的工作方式，编写更高效、更易于维护的代码。本文将深入 Vue 源码，分析 Vue 的响应式原理。

1. 什么是响应式？

简单来说，响应式就是当数据发生变化时，视图能够自动更新。在 Vue 中，当我们修改一个响应式数据时，所有依赖于该数据的视图都会自动重新渲染。

2. Vue 响应式原理的核心：Object.defineProperty

Vue 2.x 使用 Object.defineProperty 来实现响应式。 Object.defineProperty 是一个 JavaScript API，允许我们精确地控制对象的属性访问和修改。

Vue 会遍历 data 对象的所有属性，使用 Object.defineProperty 将它们转换为 getter/setter。当我们访问一个属性时，会触发 getter 函数；当我们修改一个属性时，会触发 setter 函数。在 getter 和 setter 函数中，Vue 会进行依赖收集和派发更新的操作。

3. 源码分析

我们将通过分析 Vue 源码，来深入了解 Vue 的响应式原理。

3.1 observe 函数

observe 函数是 Vue 响应式系统的入口。它会递归地遍历 data 对象的所有属性，并使用 defineReactive 函数将它们转换为响应式属性。

// src/core/observer/index.js

/**
 * Attempt to make an observerable value reactive, i.e., turn a data[key]
 * into subject of observation.
 */
export function observe (value: any, asRootData: boolean): Observer | void {
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob: Observer | void
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else if (
    shouldObserve &&
    (isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    ob = new Observer(value)
  }
  return ob
}

observe 函数首先判断 value 是否是对象，如果不是，则直接返回。如果 value 已经是响应式对象（即已经存在 __ob__ 属性），则直接返回 __ob__ 属性。否则，创建一个新的 Observer 对象，并将 value 转换为响应式对象。

3.2 Observer 类

Observer 类负责将一个对象转换为响应式对象。它会遍历对象的所有属性，并使用 defineReactive 函数将它们转换为响应式属性。

// src/core/observer/index.js

/**
 * Observer class that is attached to each observed
 * object. Once attached, the observer converts the target
 * object (and its nested objects) into reactive state.
 */
export class Observer {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that is observing this object.

  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    def(value, '__ob__', this)
    if (isArray(value)) {
      if (hasProto) {
        protoAugment(value, arrayMethods)
      } else {
        copyAugment(value, arrayMethods, arrayKeys)
      }
      this.observeArray(value)
    } else {
      this.walk(value)
    }
  }

  /**
   * Walk through each property and convert them into
   * reactive properties. This method only gets called when
   * value type is Object.
   */
  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }

  /**
   * Observe a list of Array items.
   */
  observeArray (items: Array<any>) {
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
}

展开

Observer 类的构造函数会执行以下操作：

将 value 赋值给 this.value 属性。
创建一个新的 Dep 对象，赋值给 this.dep 属性。 Dep 对象用于存储依赖于该对象的 Watcher 对象。
使用 def 函数将 __ob__ 属性添加到 value 对象上，并将 this 赋值给 __ob__ 属性。 __ob__ 属性用于标识该对象是响应式对象。
如果 value 是数组，则调用 observeArray 函数遍历数组的所有元素，并将它们转换为响应式对象。
如果 value 是对象，则调用 walk 函数遍历对象的所有属性，并使用 defineReactive 函数将它们转换为响应式属性。

3.3 defineReactive 函数

defineReactive 函数是 Vue 响应式系统的核心。它会使用 Object.defineProperty 将对象的属性转换为 getter/setter，并在 getter 和 setter 函数中进行依赖收集和派发更新的操作。

// src/core/observer/index.js

/**
 * Define a reactive property on an Object.
 */
export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: ?Function,
  shallow?: boolean
) {
  const dep = new Dep()

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  // cater for pre-defined getter/setters
  let getter = property && property.get
  let setter = property && property.set
  if ((!getter || setter) && arguments.length === 2) {
    val = obj[key]
  }

  let childOb = !shallow && observe(val)
  return Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      // #7981: for accessor properties without setter
      if (getter && !setter) return
      if (setter) {
        setter.call(obj, newVal)
      } else {
        val = newVal
      }
      childOb = !shallow && observe(newVal)
      dep.notify()
    }
  })
}

展开

defineReactive 函数会执行以下操作：

创建一个新的 Dep 对象，用于存储依赖于该属性的 Watcher 对象。
获取对象的属性描述符，如果属性不可配置，则直接返回。
如果属性已经定义了 getter/setter，则将它们保存起来。
使用 Object.defineProperty 将属性转换为 getter/setter。
- getter 函数：
  - 如果存在 getter，则调用 getter 函数获取属性值。
  - 如果 Dep.target 存在，则调用 dep.depend() 函数进行依赖收集。 Dep.target 是一个全局变量，指向当前正在执行的 Watcher 对象。
  - 如果属性值是对象，则递归地调用 observe 函数将属性值转换为响应式对象。
  - 返回属性值。
- setter 函数：
  - 如果新值与旧值相等，则直接返回。
  - 如果存在 setter，则调用 setter 函数设置属性值。
  - 否则，直接将新值赋值给属性。
  - 递归地调用 observe 函数将新值转换为响应式对象。
  - 调用 dep.notify() 函数派发更新。

3.4 Dep 类

Dep 类用于存储依赖于某个响应式对象的 Watcher 对象，并在响应式对象发生变化时通知这些 Watcher 对象进行更新。

// src/core/observer/dep.js

/**
 * A dep is an observable that can have multiple
 * directives/components subscribe to it.
 */
export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;

  constructor () {
    this.id = uid++
    this.subs = []
  }

  addSub (sub: Watcher) {
    this.subs.push(sub)
  }

  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }

  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }

  notify () {
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    if (process.env.NODE_ENV !== 'production' && !config.async) {
      // subs aren't sorted in scheduler if not running async
      // we need to sort them now to make sure they fire in correct
      // order
      subs.sort((a, b) => a.id - b.id)
    }
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

展开

Dep 类的主要方法包括：

addSub(sub: Watcher)：添加一个 Watcher 对象到 subs 数组中。
removeSub(sub: Watcher)：从 subs 数组中移除一个 Watcher 对象。
depend()：进行依赖收集。如果 Dep.target 存在，则调用 Dep.target.addDep(this) 函数将当前的 Dep 对象添加到 Watcher 对象的 deps 数组中。
notify()：派发更新。遍历 subs 数组，调用每个 Watcher 对象的 update() 函数。

3.5 Watcher 类

Watcher 类用于监听响应式对象的变化，并在响应式对象发生变化时执行回调函数。

// src/core/observer/watcher.js

/**
 * A watcher parses an expression, collects dependencies,
 * and fires callback when the expression value changes.
 * This is used for both the $watch() api and directives.
 */
export default class Watcher {
  vm: Component | null;
  expression: string;
  cb: Function;
  id: number;
  active: boolean;
  dirty: boolean;
  deps: Array<Dep>;
  newDeps: Array<Dep>;
  depIds: SimpleSet;
  newDepIds: SimpleSet;
  before: ?Function;
  getter: Function;
  value: any;

  constructor (
    vm: Component | null,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm
    if (isRenderWatcher) {
      vm._watcher = this
    }
    vm._watchers.push(this)
    // options
    if (options) {
      this.deep = !!options.deep
      this.user = !!options.user
      this.lazy = !!options.lazy
      this.sync = !!options.sync
      this.before = options.before
    } else {
      this.deep = this.user = this.lazy = this.sync = false
    }
    this.cb = cb
    this.id = ++uid // uid for batching
    this.active = true
    this.dirty = this.lazy // for lazy watchers
    this.deps = []
    this.newDeps = []
    this.depIds = new Set()
    this.newDepIds = new Set()
    this.expression = process.env.NODE_ENV !== 'production'
      ? expOrFn.toString()
      : ''
    // parse expression for getter
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
      if (!this.getter) {
        this.getter = noop
        process.env.NODE_ENV !== 'production' && warn(
          `Failed watching path: "${expOrFn}" ` +
          'Either the path is invalid or the component' +
          ' has missing data.'
        )
      }
    }
    this.value = this.lazy
      ? undefined
      : this.get()
  }

  /**
   * Evaluate the getter, and re-collect dependencies.
   */
  get () {
    pushTarget(this)
    let value
    const vm = this.vm
    try {
      value = this.getter.call(vm, vm)
    } catch (e) {
      if (this.user) {
        warn(
          `Error in watcher "${this.expression}"`,
          vm
        )
        handleError(e, vm, `watcher: ${this.expression}`)
      } else {
        throw e
      }
    } finally {
      // "touch" every property so they are all tracked as
      // dependencies for deep watching
      if (this.deep) {
        traverse(value)
      }
      popTarget()
      this.cleanupDeps()
    }
    return value
  }

  /**
   * Add a dependency to this directive.
   */
  addDep (dep: Dep) {
    const id = dep.id
    if (!this.newDepIds.has(id)) {
      this.newDepIds.add(id)
      this.newDeps.push(dep)
      if (!this.depIds.has(id)) {
        dep.addSub(this)
      }
    }
  }

  /**
   * Clean up for dependency collection.
   */
  cleanupDeps () {
    let i = this.deps.length
    while (i--) {
      const dep = this.deps[i]
      if (!this.newDepIds.has(dep.id)) {
        dep.removeSub(this)
      }
    }
    let tmp = this.depIds
    this.depIds = this.newDepIds
    this.newDepIds = tmp
    this.newDepIds.clear()
    tmp = this.deps
    this.deps = this.newDeps
    this.newDeps = tmp
    this.newDeps.length = 0
  }

  /**
   * Subscriber interface.
   * Will be called when the dependency has change.
   */
  update () {
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }

  /**
   * Scheduler job interface.
   * Will be called by the scheduler.
   */
  run () {
    if (this.active) {
      const value = this.get()
      if (
        value !== this.value ||
        // Deep watchers and watchers on Object/Arrays should fire even
        // when the value is the same. This is because the value may
        // have mutated.
        isObject(value) ||
        this.deep
      ) {
        // set new value
        const oldValue = this.value
        this.value = value
        if (this.user) {
          try {
            this.cb.call(this.vm, value, oldValue)
          } catch (e) {
            handleError(e, this.vm, `callback for watcher "${this.expression}"`)
          }
        } else {
          this.cb.call(this.vm, value, oldValue)
        }
      }
    }
  }

  /**
   * Evaluate and return the value of the watcher.
   * This only parses the expression once.
   */
  evaluate () {
    this.value = this.get()
    this.dirty = false
  }

  /**
   * Depend on all deps collected before.
   */
  depend () {
    let i = this.deps.length
    while (i--) {
      this.deps[i].depend()
    }
  }

  /**
   * Remove self from all dependencies' subscriber list.
   */
  teardown () {
    if (this.active) {
      // remove self from vm's watcher list
      // this is a somewhat expensive operation so we skip it
      // if the vm is being destroyed.
      if (!this.vm._isBeingDestroyed) {
        remove(this.vm._watchers, this)
      }
      let i = this.deps.length
      while (i--) {
        this.deps[i].removeSub(this)
      }
      this.active = false
    }
  }
}

展开

Watcher 类的主要方法包括：

get()：计算表达式的值，并进行依赖收集。
addDep(dep: Dep)：将当前的 Dep 对象添加到 Watcher 对象的 deps 数组中。
cleanupDeps()：清理依赖。
update()：当依赖发生变化时调用。
run()：执行回调函数。

4. 响应式流程总结

创建 Vue 实例： 在创建 Vue 实例时，Vue 会遍历 data 对象的所有属性，并使用 observe 函数将它们转换为响应式属性。
创建 Watcher 对象： 当我们在模板中使用响应式数据时，Vue 会创建一个 Watcher 对象来监听该数据的变化。
依赖收集： 在 Watcher 对象的 get() 方法中，会触发响应式数据的 getter 函数。在 getter 函数中，会将当前的 Watcher 对象添加到该数据的 Dep 对象中。
派发更新： 当我们修改一个响应式数据时，会触发该数据的 setter 函数。在 setter 函数中，会调用 dep.notify() 函数通知所有依赖于该数据的 Watcher 对象进行更新。
执行回调函数： Watcher 对象接收到更新通知后，会执行回调函数，重新渲染视图。

5. Vue 3.0 的响应式系统：Proxy

Vue 3.0 使用 Proxy 代替 Object.defineProperty 来实现响应式。 Proxy 提供了更强大的功能和更好的性能。

可以监听整个对象： Proxy 可以直接监听整个对象，而不需要遍历对象的每个属性。
可以监听新增和删除的属性： Proxy 可以监听新增和删除的属性，而 Object.defineProperty 只能监听已经存在的属性。
性能更好： Proxy 的性能比 Object.defineProperty 更好。

6. 总结

本文深入 Vue 源码，分析了 Vue 的响应式原理。了解 Vue 的响应式原理，可以帮助我们更好地理解 Vue 的工作方式，编写更高效、更易于维护的代码。

希望这篇文章能够帮助你更好地理解 Vue 的响应式原理。欢迎提出宝贵意见和建议！

扩展阅读：

这篇文章涵盖了 Vue 响应式原理的核心概念和源码分析，希望能帮助你深入理解 Vue 的工作方式。如果你有任何问题或需要进一步讨论具体部分，随时告诉我！