Vue.js 源码分析：响应式系统重构与 Proxy 应用

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

响应式系统核心原理

Vue.js 的响应式系统是实现数据驱动视图的核心机制。当数据发生变化时，系统能够自动检测并更新相关的 DOM 元素，避免了手动操作 DOM 的繁琐流程。

在 Vue 初始化阶段，_init 方法会执行 initState(vm) 函数，对组件的 props、methods、data、computed 和 watcher 等属性进行初始化。其中，data 的初始化过程会调用 observe 方法，将数据转换为响应式对象。

响应式对象的核心实现依赖于 Object.defineProperty 方法，该方法可以为对象的属性添加 getter 和 setter 函数。当访问属性时，会触发 getter 函数进行依赖收集；当修改属性时，会触发 setter 函数进行派发更新。

Object.defineProperty 实现机制

Vue 2.x 中响应式系统的实现主要基于 Object.defineProperty 方法。该方法允许我们为对象的属性定义 getter 和 setter 函数，从而实现对属性访问和修改的拦截。

以下是 defineReactive 函数的核心代码，它定义了一个响应式属性：

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
  }

  // 省略部分代码...

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {
        dep.depend()
        // 省略部分代码...
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      const value = getter ? getter.call(obj) : val
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      // 省略部分代码...
      dep.notify()
    }
  })
}

这段代码的主要作用是为对象 obj 的属性 key 添加 getter 和 setter 函数。在 getter 中，会进行依赖收集；在 setter 中，会进行派发更新。

Proxy 替代方案的优势

尽管 Object.defineProperty 在 Vue 2.x 中表现良好，但它存在一些局限性：

  1. 无法监听数组的变化（需要特殊处理）
  2. 无法监听对象属性的添加和删除
  3. 只能劫持对象的属性，需要遍历对象的每个属性

ES6 中引入的 Proxy 对象为解决这些问题提供了更好的方案。Proxy 可以直接代理整个对象，而不是对象的某个属性，从而可以监听对象的所有操作。

以下是使用 Proxy 实现响应式的简单示例：

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      track(target, key)
      return target[key]
    },
    set(target, key, value) {
      target[key] = value
      trigger(target, key)
      return true
    },
    deleteProperty(target, key) {
      delete target[key]
      trigger(target, key)
      return true
    }
  })
}

与 Object.defineProperty 相比，Proxy 具有以下优势：

  1. 可以直接监听对象而非属性
  2. 可以监听数组的变化
  3. 可以监听对象属性的添加和删除
  4. 有更多的拦截操作，如 deleteProperty、has 等

响应式系统源码实现

Vue 的响应式系统主要由以下几个核心模块组成：

Observer 类

Observer 类的作用是将一个普通对象转换为响应式对象。它会遍历对象的所有属性，并为每个属性添加 getter 和 setter。

export class Observer {
  value: any;
  dep: Dep;
  vmCount: number;

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

  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }

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

Dep 类

Dep 类用于管理依赖关系，它会收集所有依赖于某个属性的 Watcher 对象，并在属性发生变化时通知这些 Watcher。

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 () {
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

Watcher 类

Watcher 类用于观察数据的变化，并在数据变化时执行相应的回调函数。它是连接数据和视图的桥梁。

export default class Watcher {
  vm: Component;
  expression: string;
  cb: Function;
  id: number;
  deep: boolean;
  user: boolean;
  lazy: boolean;
  sync: boolean;
  dirty: boolean;
  active: boolean;
  deps: Array<Dep>;
  newDeps: Array<Dep>;
  depIds: SimpleSet;
  newDepIds: SimpleSet;
  getter: Function;
  value: any;

  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm
    if (isRenderWatcher) {
      vm._watcher = this
    }
    vm._watchers.push(this)
    // 省略部分代码...
    this.getter = parsePath(expOrFn)
    this.value = this.lazy ? undefined : this.get()
  }

  get () {
    pushTarget(this)
    let value
    const vm = this.vm
    try {
      value = this.getter.call(vm, vm)
    } catch (e) {
      if (this.user) {
        handleError(e, vm, `getter for watcher "${this.expression}"`)
      } else {
        throw e
      }
    } finally {
      if (this.deep) {
        traverse(value)
      }
      popTarget()
      this.cleanupDeps()
    }
    return value
  }

  update () {
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }

  run () {
    if (this.active) {
      const value = this.get()
      if (
        value !== this.value ||
        isObject(value) ||
        this.deep
      ) {
        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)
        }
      }
    }
  }

  // 省略部分代码...
}

响应式系统工作流程

Vue 的响应式系统工作流程可以分为以下几个步骤：

  1. 初始化阶段：在组件初始化时，initState 函数会调用 observe 方法，将 data 转换为响应式对象。

  2. 依赖收集：当组件渲染时，会触发模板中数据的 getter 函数，从而将当前的 Watcher 对象添加到该数据的依赖列表中。

  3. 数据更新：当数据发生变化时，会触发 setter 函数，从而通知所有依赖于该数据的 Watcher 对象。

  4. 视图更新：Watcher 对象收到通知后，会重新计算数据的值，并执行相应的回调函数，最终导致视图的更新。

响应式系统优化建议

为了提高 Vue 应用的性能，可以从以下几个方面对响应式系统进行优化：

  1. 避免不必要的响应式数据：对于不需要响应式的数据，可以使用 Object.freeze 方法冻结对象，从而避免 Vue 为其添加 getter 和 setter。

  2. 合理使用计算属性：计算属性会缓存计算结果，只有当依赖的数据发生变化时才会重新计算，从而减少不必要的计算。

  3. 使用 v-memo 指令：在列表渲染时，可以使用 v-memo 指令缓存部分 DOM 结构，避免不必要的重渲染。

  4. 避免深度监听：深度监听会递归遍历对象的所有属性，可能会影响性能。如果不需要监听对象的所有属性，可以使用 $watch 方法并指定 deep: false。

总结

Vue 的响应式系统是其核心特性之一，它通过 Object.defineProperty 或 Proxy 实现了对数据的监听，从而实现了数据驱动视图的开发模式。了解响应式系统的实现原理，有助于我们更好地理解 Vue 的工作机制，并编写出更高效的 Vue 应用。

在实际开发中，我们应该合理使用响应式系统，避免不必要的性能开销。同时，随着 JavaScript 标准的不断发展，Vue 也在不断优化响应式系统的实现，如在 Vue 3 中使用 Proxy 替代了 Object.defineProperty，从而提供了更好的性能和更丰富的功能。

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

Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

Tool Calling 为什么如此重要？

虽然真正执行这些动作的依然是外部程序，但从用户的角度来看，AI 已经不再只是一个聊天机器人，而开始像一个真正能够"做事"的助手。因此可以说Tool Calling 并没有改变 LLM 的工作原理，却极大扩展了 LLM 的能力边界。模型负责判断"是否需要工具"，真正执行工具的是外部程序（Agent Runtime）。它让 AI 从"只会说"迈向了"能够做"，成为现代 AI Agent 的基础能力。T

avatar AI Agent技术社区
cover

KMP全栈开发：从Android到AI Agent的技术演进与实践

avatar AI Agent技术社区
cover

深入浅出：如何编写高质量的 AI Agent 技能（Skill）

avatar AI Agent技术社区