Vue 响应式更新机制详解：为什么一次性修改三个数据只触发一次 DOM 更新？

拉不动的猪
343 阅读3分钟

让我们通过代码示例深入理解 Vue 的响应式更新机制，特别是为什么一次性修改多个数据只会触发一次 DOM 更新。

1. 基本示例代码

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Name: {{ name }}</p>
    <p>Flag: {{ flag }}</p>
    <button @click="updateAll">Update All</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      name: 'Vue',
      flag: false
    }
  },
  methods: {
    updateAll() {
      // 一次性修改三个数据
      this.count++
      this.name = 'Updated'
      this.flag = !this.flag
    }
  }
}
</script>

2. Vue 的响应式更新流程

2.1 数据修改阶段

  1. ‌数据变更触发‌：

    • 当 updateAll 方法执行时，三个数据属性依次被修改
    • 每个修改都会触发对应的 setter 函数

  2. ‌依赖收集‌：

    // 伪代码：简化版的依赖通知过程
setter(newVal) {
  this._value = newVal
  dep.notify() // 通知所有订阅者(Watcher)
}

  3. ‌Watcher 入队‌：

    • 每个数据变更都会通知其依赖的 Watcher
    • 但 Watcher 不会立即执行，而是被放入一个队列中

2.2 异步更新队列

  1. ‌队列去重‌：

    // 伪代码：Vue 内部的队列处理
const queue = []
let waiting = false

function queueWatcher(watcher) {
  // 每个Watcher有唯一id
  const id = watcher.id
  
  // 去重：相同的Watcher只添加一次
  if (!queue.some(w => w.id === id)) {
    queue.push(watcher)
  }
  
  // 下一个tick执行flushQueue
  if (!waiting) {
    waiting = true
    nextTick(flushQueue)
  }
}

  2. ‌nextTick 机制‌：

    • Vue 使用 Promise.then/MutationObserver/setTimeout 等实现 nextTick
    • 确保所有同步数据变更完成后才执行 DOM 更新

2.3 批量 DOM 更新

  1. ‌执行更新‌：

    function flushQueue() {
  queue.forEach(watcher => {
    watcher.run() // 执行实际的DOM更新
  })
  queue.length = 0
  waiting = false
}

  2. ‌虚拟 DOM 比对‌：

    • Watcher 执行时会触发组件的重新渲染
    • Vue 会生成新的虚拟 DOM 并与旧的进行比对
    • 计算出最小变更应用到真实 DOM

3. 为什么只有一次 DOM 更新？

3.1 关键原因

  1. ‌组件级更新‌：

    • Vue 的响应式系统是基于组件的
    • 同一个组件的多个数据变更只会触发该组件的一个更新

  2. ‌Watcher 去重‌：

    • 每个组件只有一个渲染 Watcher
    • 无论多少数据变化，同一个 Watcher 在队列中只会存在一个

  3. ‌异步批处理‌：

    • 所有同步的数据变更都在同一个事件循环中完成
    • Vue 会等到所有数据变更完成后才统一更新

3.2 性能优化

// 伪代码：Vue 的更新优化策略
function updateComponent() {
  // 1. 生成新的虚拟DOM
  const newVNode = render()
  
  // 2. 与旧的虚拟DOM比对
  const patches = diff(oldVNode, newVNode)
  
  // 3. 应用变更到真实DOM
  applyPatches(patches)
}
  • ‌批量 diff‌：三个数据变更导致的状态变化会一次性计算
  • ‌单次重绘‌：浏览器只需要进行一次重排(reflow)和重绘(repaint)

4. 验证示例

我们可以通过添加生命周期钩子来验证：

export default {
  // ...其他代码同上...
  updated() {
    console.log('DOM updated!') // 只会输出一次
  },
  beforeUpdate() {
    console.log('Before update') // 只会输出一次
  }
}

5. 特殊情况说明

虽然大多数情况下只有一次更新，但以下情况可能不同：

  1. ‌不同组件的更新‌：

    updateAll() {
  this.count++          // 组件A
  this.$refs.child.data++ // 组件B
  this.name = 'Updated' // 组件A
}
    • 这会触发组件A和组件B各一次更新

  2. ‌强制立即更新‌：

    updateAll() {
  this.count++
  this.$forceUpdate()   // 强制更新
  this.name = 'Updated' // 会再次触发更新
}

  3. ‌Vue.nextTick 中的更新‌：

    updateAll() {
  this.count++
  this.$nextTick(() => {
    this.name = 'Updated' // 会触发第二次更新
  })
}

6. 总结流程图

[同步代码执行]
    ↓
[数据变更1] → [触发setter] → [通知Watcher] → [加入队列]
[数据变更2] → [触发setter] → [通知Watcher] → [队列去重]
[数据变更3] → [触发setter] → [通知Watcher] → [队列去重]
    ↓
[同步代码执行完毕]
    ↓
[nextTick回调执行]
    ↓
[执行队列中的Watcher]
    ↓
[生成新虚拟DOM → diff算法 → 更新真实DOM]
    ↓
[单次DOM更新完成]

这种机制是 Vue 高性能的关键之一，它避免了不必要的重复计算和 DOM 操作，特别是在复杂应用中能显著提升性能。

avatar
文章
阅读
粉丝