面试题：Vue懒加载在SSR中如何避免水合（Hydration）问题？

水合问题产生原因

数据获取时机差异
- 在服务端渲染（SSR）中，数据通常是在服务端渲染阶段就获取并填充到页面中。而在客户端，由于懒加载机制，组件可能在页面渲染完成后才开始获取数据并渲染。例如，一个展示商品列表的组件，服务端已经根据当时的数据渲染好了列表，但客户端懒加载该组件时，获取到的数据可能因为时间差而有所不同，导致渲染不一致。
生命周期差异
- 服务端渲染的组件生命周期与客户端不完全相同。服务端渲染主要经历 beforeCreate 和 created 阶段来获取数据并渲染。而客户端除了这两个阶段，还有 mounted 等阶段。在懒加载场景下，客户端组件在 mounted 阶段可能会重新初始化一些数据或执行一些操作，与服务端渲染的初始状态不一致。比如，一个轮播图组件，服务端渲染时设置了初始图片，客户端懒加载后在 mounted 阶段可能重新计算了轮播图的展示逻辑，导致显示的图片与服务端渲染的不同。
DOM 操作差异
- 服务端渲染生成的是静态的 HTML 结构，客户端在水合过程中会将静态结构与动态的 JavaScript 交互逻辑进行合并。如果在懒加载组件中有复杂的 DOM 操作，可能会导致服务端渲染的 DOM 结构与客户端重新渲染的 DOM 结构不一致。例如，一个带有拖拽排序功能的列表组件，服务端渲染时是按照某种顺序排列的，但客户端懒加载后，在 mounted 阶段初始化拖拽逻辑，可能会改变列表的顺序，从而出现水合问题。

避免水合问题的方法及示例

统一数据获取逻辑
- 在服务端和客户端使用相同的数据获取逻辑和数据源。可以通过创建一个通用的数据获取函数，并在服务端渲染和客户端懒加载组件中调用。
- 示例：

// api.js
import axios from 'axios';

export async function fetchProducts() {
    const response = await axios.get('/api/products');
    return response.data;
}

<template>
    <div>
        <ul>
            <li v - for="product in products" :key="product.id">{{ product.name }}</li>
        </ul>
    </div>
</template>

<script>
import { fetchProducts } from './api';

export default {
    data() {
        return {
            products: []
        };
    },
    async created() {
        this.products = await fetchProducts();
    }
};
</script>

- 在服务端渲染时，也调用 `fetchProducts` 函数获取数据并填充到组件中，确保服务端和客户端的数据一致性。

2. 避免在客户端重复初始化数据 - 尽量在服务端渲染阶段完成数据的初始化和处理，减少客户端在 mounted 等阶段重新初始化数据的操作。如果必须在客户端进行一些操作，可以先检查服务端渲染的数据状态，避免重复操作。 - 示例：

<template>
    <div>
        <div v - if="initialized">
            <!-- 组件内容 -->
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            initialized: false
        };
    },
    mounted() {
        if (!this.initialized) {
            // 执行初始化操作
            this.initialized = true;
        }
    }
};
</script>

使用 key 保持 DOM 一致性
- 在列表渲染或有动态 DOM 操作的懒加载组件中，使用 key 来唯一标识每个元素。这有助于 Vue 在水合过程中准确地识别和更新 DOM，避免因 DOM 结构不一致导致的水合问题。
- 示例：

<template>
    <div>
        <ul>
            <li v - for="(item, index) in list" :key="item.id">{{ item.text }}</li>
        </ul>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: []
        };
    },
    async created() {
        // 获取数据填充 list
    }
};
</script>

- 通过给每个列表项设置唯一的 `key`，Vue 能够更准确地处理 DOM 更新，即使在服务端和客户端渲染过程中有一些差异，也能保证最终的 DOM 结构一致。

面试题：Vue懒加载在SSR中如何避免水合（Hydration）问题？

知识考点

面试题答案

水合问题产生原因

避免水合问题的方法及示例