Vue SSR中计算属性仅执行一次？如何触发重新执行？

项目场景与代码结构 #

使用Vite作为构建工具，在Vue SSR环境下运行项目，页面组件结构如下：

PageContent.vue #

<script setup>
const props = defineProps({ data: Object });
const chapters = ref(null);
function onChapters(newChapters) {
  console.log("PageContent.onChapters", newChapters.length);
  chapters.value = newChapters;
}
console.log("PageContent.setup");
</script>

<template>
  <ChapterOverview :chapters />
  ...
  <MainContent :data :onChapters="onChapters" />
</template>

ChapterOverview.vue #

<script setup>
const props = defineProps({ chapters: Array });
const chapterHierarchy = computed(() => {
  console.log("ChapterOverview.chapterHierarchy");
  let result = props.chapters?.reduce(...); // 生成层级结构的函数
});
</script>

MainContent.vue #

<script setup>
const props = defineProps({ data: Object, onChapters: Function });
const chapters = computed(() => {
   let result = ...
   // 复杂逻辑
   if (props.onChapters) props.onChapters(result);
   return result;
};
</script>

运行现象 #

执行命令 node bootstrap/ssr/ssr.js 后，控制台日志输出：

PageContent.setup
ChapterOverview.chapterHierarchy
PageContent.onChapters 4
PageContent.onChapters 4

预期在PageContent.onChapters之后会再次输出ChapterOverview.chapterHierarchy（因为chapterHierarchy依赖的chapters props已更新），但实际未触发，且该功能在浏览器端运行正常。已知MainContent.vue被多页面复用，无法轻易迁移内部的chapters计算逻辑。

核心疑问 #

1. 为何ChapterOverview中的computed未再次触发？
2. SSR期间能否强制其重新执行？
3. 能否为该computed单独启用响应式（已知Vue官方文档说明服务端禁用响应式）？

问题分析与解决方案 #

1. 为何computed未再次触发？ #

Vue SSR运行在字符串渲染模式，整个过程是一次性的同步渲染：

• 服务端完全禁用响应式系统，所有数据依赖的追踪仅在首次渲染时执行一次。
• 当MainContent的computed通过onChapters回调更新PageContent的chapters ref时，SSR渲染流程已走到MainContent的计算阶段，ChapterOverview的首次渲染已完成，没有响应式机制触发它的computed重新计算。
• 浏览器端具备完整的响应式系统，数据更新后能自动触发computed重新执行。

2. SSR期间能否强制其重新执行？ #

可以通过两种方式实现：

方式一：手动触发组件更新

在PageContent中，更新chapters后手动触发组件重新渲染，注意需避免SSR环境下的无限循环：

// PageContent.vue
<script setup>
import { getCurrentInstance } from 'vue';
const props = defineProps({ data: Object });
const chapters = ref(null);
const instance = getCurrentInstance();

function onChapters(newChapters) {
  console.log("PageContent.onChapters", newChapters.length);
  chapters.value = newChapters;
  // SSR下手动触发更新
  if (import.meta.env.SSR && instance) {
    instance.update();
  }
}
console.log("PageContent.setup");
</script>

方式二：调整渲染顺序，提前准备数据

由于SSR是同步渲染，可将MainContent的computed逻辑提前到页面初始化阶段，确保chapters数据在ChapterOverview渲染前就绪：

// PageContent.vue
<script setup>
const props = defineProps({ data: Object });
const chapters = ref(null);

// 复用MainContent的计算逻辑（通过导入函数方式复用，避免迁移代码）
async function initChapters() {
  const result = await computeChapters(props.data);
  chapters.value = result;
}

// SSR下同步执行初始化
if (import.meta.env.SSR) {
  initChapters();
}

function onChapters(newChapters) {
  console.log("PageContent.onChapters", newChapters.length);
  chapters.value = newChapters;
}
console.log("PageContent.setup");
</script>

3. 能否为该computed单独启用响应式？ #

不行。Vue SSR的设计是无状态的一次性渲染，响应式系统在服务端被完全禁用，无法单独为某个computed启用响应式。强行启用会破坏SSR渲染逻辑，引发内存泄漏或渲染异常。

内容的提问来源于stack exchange，提问作者Kenten Fina