Vue 源码解析：响应式原理与组件更新

2024-02-04 09:05:58

关键词：

响应式原理

在 Vue.js 中，响应式原理是指数据变化时自动触发组件更新。这种响应式的行为是通过利用 JavaScript 的 Object.defineProperty 函数实现的。当一个属性被声明为响应式的，Vue.js 会创建一个 getter 和 setter 函数来劫持该属性的访问和设置。当属性值发生变化时，setter 函数会触发 watcher 回调，从而更新组件。

组件更新

组件更新是响应式原理的关键部分。当数据变化时，组件必须重新渲染以反映这些变化。Vue.js 通过以下步骤完成组件更新：

检测变化： 当数据发生变化时，Vue.js 会使用 watcher 监听这些变化。
队列更新： 为了提高效率，Vue.js 将组件更新排队，而不是立即更新。
执行更新： 当组件更新队列被执行时，Vue.js 会重新渲染受影响的组件。

实战剖析

为了进一步理解响应式原理和组件更新，我们以 Vue 源码中的一个实际案例为例。在 src/core/instance/index.js 文件中，$set 方法用于修改响应式对象的属性值：

export function set (target: object, key: string | number, val: any): any {
  if (hasOwn(target, key)) {
    const oldValue = target[key]
    target[key] = val
    // 触发 watcher 回调
    observerState.shouldConvert = true
    observerState.target = target
    notify(observerState, oldValue, val, key)
    observerState.shouldConvert = false
  } else if (process.env.NODE_ENV !== 'production' && isObject(target)) {
    warn$1(
      `Cannot set reactive property on undefined, null, or primitive value: ${(target: any)}`
    )
  }
  return val
}