Vue 3源码极客之：`Vue`的`hydration`：如何处理服务器和客户端`DOM`的不匹配。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位观众老爷，晚上好！今天咱们来聊聊 Vue 3 源码里一个有点烧脑，但又贼重要的东西：hydration，也就是水合作用。特别是当服务器渲染（SSR）和客户端 DOM 出现“婚后不和谐”的时候，Vue 3 是怎么充当“婚姻调解员”的。

开场白：SSR 和水合，一对欢喜冤家

SSR 的好处大家都知道，首屏渲染快，SEO 友好。但它也有个小脾气，那就是在服务器生成 HTML 后，客户端 Vue 应用要“接管”这个 HTML，让它活起来，变成真正的响应式应用。这个“接管”的过程，就是水合。

想象一下，服务器给你做了一顿美味佳肴（HTML），摆好了盘（DOM 结构），但是菜是凉的，没味道，你得自己加热（绑定事件），加点调料（变成响应式数据）。

问题来了，如果服务器做的菜和你想要的口味不一样，或者你想要的摆盘方式和服务器不一样，那怎么办？这就是服务器和客户端 DOM 不匹配的问题。

一、水合的基本流程

在 Vue 3 中，水合主要发生在 createApp().mount() 的时候。简单来说，Vue 会拿客户端渲染的 VNode 树，和服务器渲染出来的 DOM 结构进行对比，如果发现不同，就进行必要的修补。

大致的流程如下：

VNode 创建： 客户端 Vue 应用会根据模板编译生成 VNode 树。
DOM 查找： mount 的时候，Vue 会找到服务器渲染的 HTML 对应的 DOM 节点，作为水合的根节点。
VNode 和 DOM 对比： Vue 会递归地对比 VNode 树和 DOM 树，找出差异。
DOM 修补： 根据对比结果，Vue 会对 DOM 进行必要的修改，比如添加事件监听器、更新文本内容、添加或删除元素等等。
接管： 最后，Vue 会接管整个应用，让其变成一个真正的响应式应用。

二、不匹配的类型和处理策略

服务器和客户端 DOM 不匹配的情况有很多，Vue 3 针对不同的情况采取了不同的处理策略。

不匹配类型	描述	Vue 3 处理策略
文本内容不匹配	服务器渲染的文本内容和客户端 VNode 中的文本内容不一样。	优先使用客户端 VNode 中的文本内容，更新 DOM。
属性不匹配	服务器渲染的 DOM 元素的属性和客户端 VNode 中的属性不一样。	优先使用客户端 VNode 中的属性值，更新 DOM。对于一些特殊的属性，例如 `class` 和 `style`，会进行合并处理。
元素类型不匹配	服务器渲染的是一个 A 元素，客户端 VNode 期望的是一个 B 元素。	直接替换整个元素。
DOM 结构不匹配	服务器渲染的 DOM 结构和客户端 VNode 树的结构不一样（比如节点数量、顺序不同）。	Vue 会尝试进行最小化的修改，尽量复用已有的 DOM 节点。如果差异过大，可能会直接替换整个子树。
事件监听器不匹配	服务器渲染的 DOM 元素没有绑定事件监听器，而客户端 VNode 需要绑定。	添加事件监听器。如果服务器渲染的 DOM 元素已经绑定了事件监听器，Vue 会保留这些监听器。
注释节点不匹配	服务器渲染的 DOM 包含注释节点，而客户端 VNode 没有。	通常会忽略这些注释节点。

三、源码解析：patchProp 函数

patchProp 函数是 Vue 3 中用于更新 DOM 元素属性的关键函数，在水合过程中也扮演着重要角色。它的作用是比较新旧 VNode 的属性，然后根据差异更新 DOM 元素。

// 源码位置：packages/runtime-dom/src/patchProp.ts

export function patchProp(
  el: any,
  key: string,
  prevValue: any,
  nextValue: any,
  isSVG?: boolean,
  prevChildren?: VNode[],
  parentComponent?: ComponentInternalInstance | null,
  parentSuspense?: SuspenseBoundary | null,
  unmountChildren?: UnmountChildrenFn
) {
  // ... 省略了一些平台相关的判断和处理

  if (key === 'class') {
    patchClass(el, nextValue, isSVG)
  } else if (key === 'style') {
    patchStyle(el, prevValue, nextValue)
  } else if (isOn(key)) {
    // 处理事件监听器
    patchEvent(el, key, prevValue, nextValue, parentComponent)
  } else if (
    key[0] === '.'
      ? ((key = key.slice(1)), true)
      : key[0] === '^'
        ? ((key = key.slice(1)), true)
        : shouldSetAsProp(el, key, nextValue, isSVG)
  ) {
    // ... 处理 DOM 属性
    patchDOMProp(el, key, nextValue, prevChildren, parentComponent, parentSuspense, unmountChildren)
  } else {
    // ... 处理 HTML 属性
    if (nextValue === null || nextValue === false) {
      el.removeAttribute(key)
    } else {
      el.setAttribute(key, nextValue)
    }
  }
}

从代码中可以看到，patchProp 函数会根据属性的类型，调用不同的处理函数：

patchClass：处理 class 属性。
patchStyle：处理 style 属性。
patchEvent：处理事件监听器。
patchDOMProp：处理 DOM 属性。
el.setAttribute：处理 HTML 属性。

四、特殊属性的处理：class 和 style

class 和 style 属性比较特殊，因为它们的值可能是字符串、对象或数组。Vue 3 在处理这两个属性时，会进行合并操作，而不是直接替换。

1. class 属性

patchClass 函数负责处理 class 属性。它的逻辑如下：

如果 nextValue 是 null 或 undefined，则移除 class 属性。
否则，将 nextValue 转换为字符串，并设置到 el.className 上。

// 源码位置：packages/runtime-dom/src/modules/patchClass.ts

export function patchClass(el: Element, value: string | null, isSVG: boolean) {
  if (value === null) {
    value = ''
  }
  if (isSVG) {
    el.setAttribute('class', value)
  } else {
    el.className = value
  }
}

2. style 属性

patchStyle 函数负责处理 style 属性。它的逻辑比较复杂，需要考虑以下几种情况：

nextValue 是 null 或 undefined：移除所有内联样式。
prevValue 是 null 或 undefined：将 nextValue 中的所有样式添加到 DOM 元素上。
prevValue 和 nextValue 都是对象：比较两个对象，移除 prevValue 中有但 nextValue 中没有的样式，添加 nextValue 中有但 prevValue 中没有的样式，更新 prevValue 和 nextValue 中都有但值不同的样式。

// 源码位置：packages/runtime-dom/src/modules/patchStyle.ts

export function patchStyle(
  el: Element,
  prevValue: StyleValue | null,
  nextValue: StyleValue | null
): void {
  const style = (el as HTMLElement).style
  const isString = isString(nextValue)
  if (nextValue && !isString) {
    if (prevValue && !isString(prevValue)) {
      // prevValue 和 nextValue 都是对象
      for (const key in prevValue) {
        if (nextValue[key] == null) {
          setStyle(style, key, '')
        }
      }
    }
    for (const key in nextValue) {
      setStyle(style, key, nextValue[key])
    }
  } else {
    const currentDisplay = style.display
    if (nextValue == null || isString) {
      if (prevValue !== nextValue) {
        style.cssText = nextValue || ''
      }
    }
  }
  // important: due to SSR inline style injection, the styles applied
  // to the element may have already been processed!
  if (__DEV__ && nextValue && !isString) {
    if (!('__vue_inline_style_cache' in el)) {
      Object.defineProperty(el, '__vue_inline_style_cache', {
        value: Object.assign({}, style),
        writable: false,
        enumerable: false,
        configurable: true
      })
    }
  }
}

五、水合的优化策略

水合过程会带来一定的性能开销，因此 Vue 3 采取了一些优化策略来减少开销：

跳过静态节点： 对于静态节点（没有动态绑定），Vue 3 会跳过水合过程，直接复用服务器渲染的 DOM 节点。
渐进式水合： Vue 3 支持渐进式水合，也就是先水合可见区域的组件，然后再水合其他组件。这样可以提高首屏渲染速度。
客户端接管： 对于一些只需要在客户端渲染的组件，可以在服务器端渲染一个占位符，然后在客户端进行水合。
使用 v-once 指令： 对于只需要渲染一次的静态内容，可以使用 v-once 指令来跳过水合过程。

六、解决不匹配的终极武器：client-only 组件

如果实在无法解决服务器和客户端 DOM 的不匹配问题，可以使用 client-only 组件。这个组件只会在客户端渲染，在服务器端渲染一个空的占位符。

<template>
  <ClientOnly>
    <!-- 这里的内容只会在客户端渲染 -->
    <MyComponent />
  </ClientOnly>
</template>

<script>
import ClientOnly from './ClientOnly.vue'
import MyComponent from './MyComponent.vue'

export default {
  components: {
    ClientOnly,
    MyComponent
  }
}
</script>

ClientOnly 组件的实现非常简单：

// ClientOnly.vue
<template>
  <slot />
</template>

<script>
import { defineComponent, onMounted, ref } from 'vue'

export default defineComponent({
  setup() {
    const show = ref(false)

    onMounted(() => {
      show.value = true
    })

    return {
      show
    }
  }
})
</script>

在服务器端，show 的值为 false，因此 ClientOnly 组件不会渲染任何内容。在客户端，onMounted 会在组件挂载后执行，将 show 的值设置为 true，从而渲染 slot 中的内容。

总结：水合，让 SSR 真正活起来

水合是 SSR 中至关重要的一步，它让服务器渲染的 HTML 变成一个真正的响应式应用。Vue 3 提供了强大的水合机制，能够处理各种服务器和客户端 DOM 不匹配的情况，并采取了多种优化策略来提高性能。理解水合的原理，可以帮助我们更好地使用 SSR，构建高性能的 Vue 应用。

希望今天的讲座对大家有所帮助！下次再见！

发表回复 取消回复

发表回复取消回复