面试题：Vue Keep - Alive在服务端渲染（SSR）高级难度相关问题

缓存机制不同点

生命周期钩子差异：
- 客户端渲染：keep - alive 组件缓存的组件，在进入缓存和离开缓存时，会触发 activated 和 deactivated 生命周期钩子。组件状态在缓存期间得以保留。
- SSR环境：由于SSR主要关注页面的初始渲染，keep - alive 的缓存机制在SSR中并没有像客户端那样完整的生命周期钩子支持。SSR更侧重于将初始页面结构和数据渲染到HTML中，对于组件缓存状态的处理相对有限。
数据来源与同步：
- 客户端渲染：缓存的数据主要在客户端内存中维护，当组件重新激活时，直接从缓存中读取数据。
- SSR环境：SSR渲染过程是无状态的，每次渲染可能基于不同的请求上下文。这意味着即使使用 keep - alive，缓存的数据可能在不同请求间无法有效共享和同步，因为每个请求的SSR渲染是独立进行的。

解决缓存数据不一致问题的方法

使用外部缓存存储：
- 可以使用诸如Redis等外部缓存存储。在SSR渲染过程中，当组件数据需要缓存时，将数据存储到Redis中。当组件重新渲染时，从Redis中读取数据。这样可以保证不同请求间缓存数据的一致性。
- 示例代码（假设使用Node.js和ioredis库）：
```
const Redis = require('ioredis');
const redis = new Redis();

async function getCachedData(key) {
    return await redis.get(key);
}

async function setCachedData(key, value) {
    await redis.set(key, value);
}
```
在Vue组件中，可以在 created 或 mounted 钩子中调用这些函数来获取或设置缓存数据。

数据序列化与反序列化：

在SSR渲染期间，将组件需要缓存的数据序列化为字符串存储在页面的某个地方（如 window.__INITIAL_STATE__）。在客户端激活组件时，从这个位置读取数据并反序列化，以恢复组件的缓存状态。
在SSR端：

const app = new Vue({
    data() {
        return {
            cachedData: { /* 要缓存的数据 */ }
        };
    },
    created() {
        // 将数据序列化并存储到全局变量
        window.__INITIAL_STATE__ = JSON.stringify(this.cachedData);
    }
});

在客户端：

const app = new Vue({
    data() {
        return {
            cachedData: null
        };
    },
    created() {
        if (window.__INITIAL_STATE__) {
            this.cachedData = JSON.parse(window.__INITIAL_STATE__);
        }
    }
});

路由参数与缓存标识：

利用路由参数来标识组件的不同状态。当路由参数变化时，更新缓存数据。例如，在一个列表页面，通过路由参数传递页码，当页码变化时，重新获取数据并更新缓存。
在Vue Router配置中：

const router = new VueRouter({
    routes: [
        {
            path: '/list/:page',
            component: ListComponent
        }
    ]
});

在 ListComponent 中：

export default {
    data() {
        return {
            listData: null
        };
    },
    watch: {
        '$route.params.page': {
            immediate: true,
            handler(newPage) {
                // 根据新的页码重新获取数据并更新缓存
                this.fetchListData(newPage);
            }
        }
    },
    methods: {
        async fetchListData(page) {
            // 从API获取数据
            const response = await axios.get(`/api/list?page=${page}`);
            this.listData = response.data;
        }
    }
};

星途面试题库

面试题：Vue Keep - Alive在服务端渲染（SSR）高级难度相关问题

知识考点

面试题答案

缓存机制不同点

解决缓存数据不一致问题的方法