【Vue源码解析】之响应式系统

引言

Vue2的响应式系统是核心之一,它使得Vue.js能够实现数据驱动的视图变化。其实现主要基于Object.defineProperty API,通过在数据对象上添加属性监听来实现数据变化时对视图进行更新。

vue3实现主要基于Proxy API和Reactive,Reactive函数负责将一个普通的JavaScript对象转换成响应式对象。它通过递归遍历对象的所有属性,并使用Proxy代理对象来实现对属性的拦截。

Vue2.x响应式系统

在Vue.js中,响应式系统主要分为两部分:数据劫持和发布订阅。

数据劫持:通过使用Object.defineProperty API来对数据对象的属性进行劫持,在属性get和set时添加钩子函数,在get时记录依赖,在set时通知观察者更新视图。

发布订阅:Vue.js通过实现一个自己的发布订阅模型来实现响应式系统,通过依赖收集器来收集所有依赖,并在依赖变化时触发通知器进行视图更新。

具体来说,Vue2.x的响应式原理主要是通过Observer、Dep和Watcher三个核心组件来实现的。

Vue2.x源码解析

下面是Vue2.x响应式原理源码解析:

1. Observer

用于收集数据属性的依赖,并在数据发生变化时通知订阅者进行更新。

Observer负责将一个普通的JavaScript对象转换成响应式对象。它通过递归遍历对象的所有属性,并使用Object.defineProperty方法为每个属性设置getter和setter。在getter中,Observer会收集当前正在执行的Watcher作为依赖。在setter中,Observer会触发依赖更新,并通知相关的Watcher进行更新。

javascript 复制代码
class Observer {
  constructor(value) {
    // this.value = value
    this.dep = new Dep()
    this.vmCount = 0
    def(value, '__ob__', this)
    if (isArray(value)) {
      // 数组处理
      // ...
    } else {
      // 对象处理
      const keys = Object.keys(value)
      for (let i = 0; i < keys.length; i++) {
        const key = keys[i]
        defineReactive(value, key, NO_INIITIAL_VALUE, undefined, shallow, mock)
      }
    }
  }
}
  1. 在Observer构造函数中,创建一个Dep实例作为依赖收集器。然后,通过def函数将Observer实例添加到value对象的__ob__属性上,这样可以在后续操作中方便地获取到Observer实例。

  2. 接下来,根据value的类型进行不同的处理。如果是数组,则调用数组处理逻辑;如果是对象,则调用对象处理逻辑。

  3. 在对象处理逻辑中,通过Object.keys方法获取对象的所有属性,并遍历每个属性,调用defineReactive函数为每个属性设置getter和setter。

2. Dep(依赖收集器)

用于存储一个或多个依赖关系,在数据发生变化时通知订阅者进行更新。

Dep是一个用于收集依赖和触发更新的类。每个响应式对象都会有一个对应的Dep实例,用于管理该对象所有属性的依赖关系。在getter中,Watcher会将自身添加到Dep实例中,表示该Watcher依赖于该属性。在setter中,Dep实例会通知所有依赖于该属性的Watcher进行更新。

javascript 复制代码
class Dep {
  ...
  constructor() {
    this.subs = []
  }

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

  removeSub(sub) {
    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++) {
      const sub = subs[i]
      // ...
      subs.update()
    }
  }
}

在Dep类中,subs数组用于存储所有依赖(即Watcher)。

  • addSub方法用于将一个依赖添加到subs数组中。

  • removeSub方法用于从subs数组中移除一个依赖。

  • depend方法用于将当前正在执行的Watcher添加到Dep实例中。

  • notify方法用于触发所有依赖(即Watcher)进行更新。

3. Watcher(观察者)

用于订阅一个或多个依赖关系,在依赖发生变化时执行相应的回调函数。

Watcher是一个用于订阅和接收属性变化通知的类。它负责创建一个订阅者,并将自身添加到当前正在执行的Dep实例中。当属性发生变化时,Dep实例会通知所有订阅者进行更新。

javascript 复制代码
class Watcher {
  constructor(vm, expOrFn, cb) {
    if ((this.vm = vm) && isRenderWatcher) {
      vm._watcher = this
    }

    if (isFunction(expOrFn)) {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
      if (!this.getter) {
        this.getter = noop
      }
    }
    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) {
      // ...
    } finally {
      if (this.deep) {
        traverse(value)
      }
      popTarget()
      this.cleanupDeps()
    }
    return value
  }

  addDep(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)
      }
    }
  }

  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
      ) {
        // ...
        this.cb.call(this.vm, value, oldValue)
      }
    }
  }
}

在Watcher构造函数中,首先将传入的vm、expOrFn和cb保存到实例的对应属性上。expOrFn可以是一个函数或一个字符串,如果是字符串,则会通过parsePath方法将其解析为一个函数。

get方法用于获取属性的值。在get方法中,会将当前Watcher添加到全局的targetStack中,并将Dep.target设置为当前Watcher。然后通过调用getter方法获取属性的值,并在过程中收集依赖。最后,将Dep.target恢复为上一个Watcher,并返回属性的值。

addDep方法用于将依赖(即Dep实例)添加到当前Watcher中。在addDep方法中,会判断该依赖是否已经被添加过,如果没有,则将其添加到newDeps数组和newDepIds集合中,并判断是否已经被订阅过,如果没有,则调用dep.addSub(this)将当前Watcher添加到依赖(即Dep实例)中。

update方法用于触发更新操作。在update方法中,会调用run方法进行更新。

run方法用于执行更新操作。首先获取最新的属性值,并与旧值进行比较。如果不相等或新值是对象或this.deep为true,则调用回调函数cb进行更新操作。

Vue3源码解析

在Vue3的源码中,createReactiveObject函数是reactive.ts文件中的核心部分,负责创建响应式对象。路径packages/reactivity/src/reactive.ts

createReactiveObject

typescript 复制代码
function createReactiveObject(
  target: Target,
  isReadonly: boolean,
  baseHandlers: ProxyHandler<any>,
  collectionHandlers: ProxyHandler<any>,
  proxyMap: WeakMap<Target, any>
): any {
  // 检查目标对象是否为非对象类型,如果是则直接返回
  if (!isObject(target)) {
    if (__DEV__) {
      console.warn(`value cannot be made reactive: ${String(target)}`)
    }
    return target
  }
  // 如果目标对象已经是一个Proxy,则直接返回它
  // 例外情况:在一个响应式对象上调用readonly()函数
  if (
    target[ReactiveFlags.RAW] &&
    !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
  ) {
    return target
  }
  // 检查目标对象是否已经存在对应的代理对象,如果存在则直接返回缓存的代理对象
  const existingProxy = proxyMap.get(target)
  if (existingProxy) {
    return existingProxy
  }
  // 只有特定类型的值可以被观察
  const targetType = getTargetType(target)
  if (targetType === TargetType.INVALID) {
    return target
  }
  // 创建一个新的代理对象proxy
  const proxy = new Proxy(
    target,
    targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
  )
  // 将代理对象proxy缓存到proxyMap中
  proxyMap.set(target, proxy)
  return proxy
}

在这个函数中,首先会检查目标对象是否为非对象类型,如果是则直接返回。然后会检查目标对象是否已经存在对应的代理对象,如果存在则直接返回缓存的代理对象。

接下来,会根据传入的参数选择相应的处理器(baseHandlers或collectionHandlers),并使用new Proxy创建一个代理对象proxy。

最后,将代理对象proxy缓存到proxyMap中,并返回该代理对象。

通过这个函数,Vue3实现了对目标对象的响应式转换,并缓存了代理对象以避免重复创建。

effect

文件路径packages/reactivity/src/effect.ts

在Vue3的源码中,effect.ts文件包含了effecttriggertrack这些核心源码,它们在Vue3的响应式系统中扮演着重要的角色。下面是对这些核心源码及其作用的大致讲解:

ts 复制代码
export function effect<T = any>(
  fn: () => T,
  options?: ReactiveEffectOptions
): ReactiveEffectRunner {
  if ((fn as ReactiveEffectRunner).effect instanceof ReactiveEffect) {
    fn = (fn as ReactiveEffectRunner).effect.fn
  }

  const _effect = new ReactiveEffect(fn)
  if (options) {
    extend(_effect, options)
    if (options.scope) recordEffectScope(_effect, options.scope)
  }
  if (!options || !options.lazy) {
    _effect.run()
  }
  const runner = _effect.run.bind(_effect) as ReactiveEffectRunner
  runner.effect = _effect
  return runner
}
  • effect函数用于创建一个副作用函数,该副作用函数会自动追踪其依赖,并在依赖变化时自动重新执行。
  • effect(fn, options)接受一个函数 fn 和一个可选的选项对象 options
  • 在内部,它通过调用 createReactiveEffect(fn, options) 创建了一个 ReactiveEffect 实例 _effect
  • 如果选项中没有设置 lazy: true(即立即执行),则会调用 _effect.run() 来执行副作用函数。
  • 最后,创建并返回一个运行器 runner = _effect.run.bind(_effect),并将 _effect 实例赋值给运行器的属性 runner.effect = _effect

track

  • track(target, key)函数用于收集当前正在执行的副作用函数的依赖。
  • 它通过调用 track(target, key) 来进行依赖收集。
  • 在内部,它使用了一个名为 targetMap 的 WeakMap 来存储依赖关系。它以目标对象为键,以属性的依赖集合为值。
  • 当访问响应式对象的属性时,会获取当前正在执行的副作用函数,并将其添加到对应属性的依赖集合中。

trigger

  • trigger函数用于触发依赖更新,即执行所有依赖该属性的副作用函数。
  • 在内部,它使用了一个名为 targetMap 的 WeakMap 来获取存储在追踪阶段收集到的依赖关系。
  • 它遍历所有相关联的副作用函数,并执行它们。

通过这些核心源码,Vue3实现了响应式系统中的副作用追踪和依赖更新。effect函数用于创建副作用函数,track函数用于收集依赖,trigger函数用于触发更新。它们共同协作,实现了Vue3的响应式原理。

总结

Vue2和Vue3在响应式系统的实现上有一些重要的区别,下面是它们之间的主要区别:

  1. 实现方式:

    • Vue2使用Object.defineProperty来实现响应式。它通过在对象上定义getter和setter来拦截对属性的访问和修改,从而实现依赖收集和触发更新。
    • Vue3使用Proxy来实现响应式。Proxy是ES6中新增的特性,它可以拦截对象上的各种操作,包括属性访问、修改、删除等。Vue3利用Proxy的强大拦截能力来追踪依赖并触发更新。
  2. 性能优化:

    • Vue2在每个组件实例化时都会为数据对象进行递归遍历,并为每个属性设置getter和setter。这样会导致初始化时的性能开销较大。
    • Vue3通过Proxy实现了惰性创建副作用函数(effect),只有当副作用函数被真正使用时才会进行依赖收集。这样可以减少不必要的依赖收集和更新操作,提高了性能。
  3. 依赖追踪:

    • Vue2使用全局变量Dep来追踪依赖关系,并将Watcher与Dep进行关联。每个属性都有一个对应的Dep实例,当属性被访问时,Watcher会将自身添加到Dep中,当属性发生变化时,Dep会通知所有关联的Watcher进行更新。
    • Vue3使用WeakMap来存储依赖关系,将对象作为键,将属性的依赖集合作为值。这样可以避免内存泄漏,并且不需要全局变量来追踪依赖。
  4. 嵌套属性和数组:

    • Vue2对于嵌套属性和数组的处理较为复杂。对于嵌套属性,需要递归调用Observer进行响应式转换;对于数组,需要重写数组的一些方法来拦截变更操作。
    • Vue3通过Proxy的拦截能力可以直接处理嵌套属性和数组。无需递归调用Observer或重写数组方法。
  5. TypeScript支持:

    • Vue3对TypeScript提供了更好的支持,并且在源码中使用了大量的TypeScript类型定义,提高了开发效率和代码可靠性。

总体而言,Vue3在响应式系统上进行了一系列改进和优化,提升了性能、可维护性和开发体验。同时引入Composition API以及对TypeScript的支持也使得开发更加灵活和可靠。

相关推荐
在未来等你11 小时前
Kafka面试精讲 Day 12:副本同步与数据一致性
大数据·分布式·面试·kafka·消息队列
gnip12 小时前
链式调用和延迟执行
前端·javascript
SoaringHeart12 小时前
Flutter组件封装:页面点击事件拦截
前端·flutter
杨天天.12 小时前
小程序原生实现音频播放器,下一首上一首切换,拖动进度条等功能
前端·javascript·小程序·音视频
Dragon Wu12 小时前
React state在setInterval里未获取最新值的问题
前端·javascript·react.js·前端框架
Jinuss12 小时前
Vue3源码reactivity响应式篇之watch实现
前端·vue3
YU大宗师12 小时前
React面试题
前端·javascript·react.js
木兮xg12 小时前
react基础篇
前端·react.js·前端框架
ssshooter13 小时前
你知道怎么用 pnpm 临时给某个库打补丁吗?
前端·面试·npm
IT利刃出鞘13 小时前
HTML--最简的二级菜单页面
前端·html