Vue 3源码深度解析之：组件的更新流程：从`props`变更到`VNode`重新渲染。

各位观众老爷，晚上好！今天咱们聊点硬核的，扒一扒 Vue 3 组件更新的心路历程，看看它是如何从 props 的一个小小变动，最终引发整个 VNode 重新渲染的“蝴蝶效应”。准备好了吗？系好安全带，发车喽！

第一站：props 变更的信号枪

首先，我们要明确一点：Vue 3 的响应式系统是整个更新流程的基石。当父组件传递给子组件的 props 发生变化时，它并不是悄无声息的，而是会触发一系列连锁反应。

想象一下，props 就像是连接父子组件的脐带，父组件的变化通过这条脐带传递给子组件。那么，这个“传递”的过程是怎么实现的呢？答案就是 reactive 和 ref。

如果 props 里面的某个属性是 reactive 对象或者 ref，那么当这个属性的值发生改变的时候，Vue 的响应式系统就能精准地捕捉到这个变化。

举个例子：

// ParentComponent.vue
<template>
  <ChildComponent :message="parentMessage" />
  <button @click="updateMessage">Update Message</button>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const parentMessage = ref('Hello from Parent!');

const updateMessage = () => {
  parentMessage.value = 'New message from Parent!';
};
</script>

// ChildComponent.vue
<template>
  <p>{{ message }}</p>
</template>

<script setup>
defineProps({
  message: {
    type: String,
    required: true,
  },
});
</script>

在这个例子中，parentMessage 是一个 ref，当点击 "Update Message" 按钮时，parentMessage.value 的值会发生改变，触发 Vue 的响应式系统。

第二站：effect 的出动

响应式系统捕捉到 props 的变化后，接下来就要通知相关的 effect 函数。effect 函数可以理解为“观察者”，它会监听特定的响应式数据，并在数据发生改变时执行相应的操作。

在 Vue 3 的组件更新流程中，与 props 相关的 effect 函数通常是组件的渲染函数或者计算属性。当 props 发生变化时，这些 effect 函数会被触发，从而启动组件的更新。

具体来说，每个组件实例都有一个与之关联的 effect 函数，这个函数负责执行组件的渲染逻辑。当 props 发生变化时，这个 effect 函数会被重新执行，生成新的 VNode。

// 简化的 effect 函数示例 (非 Vue 源码，用于理解概念)
function effect(fn) {
  const effectFn = () => {
    // 执行依赖收集，确定哪些响应式数据被依赖
    cleanup(effectFn); // 清除之前的依赖
    activeEffect = effectFn; // 设置当前激活的 effect
    const result = fn(); // 执行传入的函数，触发响应式数据的 get 操作，收集依赖
    activeEffect = null; // 重置 activeEffect
    return result;
  };

  effectFn.deps = []; // 存储依赖的响应式数据
  effectFn(); // 立即执行一次
  return effectFn;
}

// 依赖收集的简单示例 (非 Vue 源码，用于理解概念)
const targetMap = new WeakMap();

function track(target, key) {
  if (!activeEffect) return;
  let depsMap = targetMap.get(target);
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }
  let deps = depsMap.get(key);
  if (!deps) {
    deps = new Set();
    depsMap.set(key, deps);
  }
  deps.add(activeEffect);
  activeEffect.deps.push(deps);
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;
  const deps = depsMap.get(key);
  if (!deps) return;

  deps.forEach(effect => {
    effect(); // 触发 effect 函数
  });
}

function cleanup(effectFn) {
  effectFn.deps.forEach(deps => {
    deps.delete(effectFn);
  });
  effectFn.deps.length = 0;
}

let activeEffect = null;

// 模拟响应式数据
const data = { count: 0 };
const proxyData = new Proxy(data, {
  get(target, key) {
    track(target, key);
    return target[key];
  },
  set(target, key, value) {
    target[key] = value;
    trigger(target, key);
    return true;
  }
});

// 使用 effect 函数
const myEffect = effect(() => {
  console.log('Count changed:', proxyData.count);
});

// 改变数据
proxyData.count++; // 会触发 myEffect 函数

第三站：VNode 的新生

当组件的 effect 函数被重新执行时，它会生成一个新的 VNode。VNode 是 Vue 3 中的虚拟 DOM，它是一个 JavaScript 对象，描述了组件应该渲染成什么样的真实 DOM 结构。

新的 VNode 包含了组件最新的状态信息，包括 props、data、computed 等。Vue 3 会将新的 VNode 与旧的 VNode 进行比较（这个过程叫做 "diff"），找出两者之间的差异，然后只更新需要更新的部分，而不是完全重新渲染整个组件。

// VNode 的简单结构示例
{
  type: 'div', // 标签名
  props: { // 属性
    id: 'my-element',
    class: 'container'
  },
  children: [ // 子节点
    { type: 'p', children: 'Hello, world!' }
  ],
  el: null // 对应的真实 DOM 元素
}

第四站：diff 算法的精妙之处

diff 算法是 Vue 3 中最核心的算法之一，它负责比较新旧 VNode，找出两者之间的差异，并生成一系列的更新操作。

Vue 3 的 diff 算法采用了多种优化策略，例如：

• 同层比较： 只比较同一层级的节点，不会跨层级比较。
• key 的作用： 使用 key 属性可以帮助 Vue 3 更准确地判断哪些节点发生了移动、添加或删除。
• 最长递增子序列： 在处理列表更新时，Vue 3 会利用最长递增子序列算法，尽可能地减少 DOM 移动的操作。

// 简化的 diff 算法示例 (非 Vue 源码，用于理解概念)
function diff(oldVNode, newVNode) {
  if (oldVNode.type !== newVNode.type) {
    // 如果节点类型不同，直接替换
    return replaceNode(oldVNode, newVNode);
  }

  if (typeof oldVNode.children === 'string' && typeof newVNode.children === 'string') {
    // 如果都是文本节点，直接更新文本内容
    if (oldVNode.children !== newVNode.children) {
      updateTextContent(oldVNode, newVNode.children);
    }
    return;
  }

  // 比较属性
  diffProps(oldVNode, newVNode);

  // 比较子节点
  diffChildren(oldVNode, newVNode);
}

function diffProps(oldVNode, newVNode) {
  // ...
}

function diffChildren(oldVNode, newVNode) {
  // ...
}

第五站：patch 的登场

patch 函数负责将 diff 算法生成的更新操作应用到真实的 DOM 上。patch 函数会根据不同的更新操作，执行相应的 DOM 操作，例如：

• 创建新的 DOM 元素： 当新 VNode 中存在旧 VNode 中没有的节点时，patch 函数会创建新的 DOM 元素，并将其插入到正确的位置。
• 删除旧的 DOM 元素： 当旧 VNode 中存在新 VNode 中没有的节点时，patch 函数会删除旧的 DOM 元素。
• 更新 DOM 元素的属性： 当新旧 VNode 的属性值不同时，patch 函数会更新 DOM 元素的属性。
• 移动 DOM 元素： 当节点的位置发生变化时，patch 函数会移动 DOM 元素。

// 简化的 patch 函数示例 (非 Vue 源码，用于理解概念)
function patch(oldVNode, newVNode) {
  const el = newVNode.el = oldVNode.el; // 复用旧的 DOM 元素

  if (oldVNode === newVNode) {
    return;
  }

  if (oldVNode.type !== newVNode.type) {
    // 如果节点类型不同，直接替换
    const newEl = document.createElement(newVNode.type);
    // ... 设置属性等
    el.parentNode.replaceChild(newEl, el);
    return;
  }

  // ... 其他更新逻辑，例如更新属性、子节点等
}

第六站：渲染完成，皆大欢喜

经过 diff 和 patch 的一番操作，真实的 DOM 最终被更新成了与新的 VNode 相匹配的状态。至此，组件的更新流程就告一段落了。

总结一下，整个流程可以概括为以下几个步骤：

步骤	描述	关键技术
1. props 变更	父组件传递给子组件的 props 发生变化。	reactive、ref
2. effect 触发	响应式系统捕捉到 props 的变化，触发组件的 effect 函数。	effect、依赖收集
3. VNode 生成	组件的 effect 函数重新执行，生成新的 VNode。	h 函数（createElement）
4. diff 算法	Vue 3 将新的 VNode 与旧的 VNode 进行比较，找出两者之间的差异。	diff 算法
5. patch 更新	patch 函数将 diff 算法生成的更新操作应用到真实的 DOM 上。	DOM 操作

一些额外的小贴士：

• 避免不必要的更新： 尽量使用 computed 和 memo 来缓存计算结果，避免不必要的渲染。
• 合理使用 key： 在列表渲染时，务必使用 key 属性，并且 key 的值应该是唯一的。
• 拥抱 Composition API： 使用 Composition API 可以更好地组织代码，提高组件的可维护性。

最后，送大家一句至理名言：

“理解了 Vue 3 的更新流程，你就能更好地掌控组件的性能，写出更高效、更优雅的代码！”

今天的讲座就到这里，感谢大家的收听！如果大家对 Vue 3 的源码感兴趣，可以去 GitHub 上 clone 一份，自己动手调试一下，相信会有更深的体会。 咱们下期再见！