在 Vue 3 中，Composition API 提供了更灵活的方式来组织代码，增强了代码的可读性和可维护性。对于服务端渲染（SSR），我们需要确保代码能够在服务端和客户端都能正确运行，这通常被称为“通用代码”。下面我们将探讨如何在使用 Composition API 时实现 SSR 功能，并通过实例来说明。
什么是通用代码？
通用代码是指既可以在服务器端（SSR）执行，也可以在客户端（SPA）执行的代码。在 Vue 2 中，我们主要通过生命周期钩子如created和beforeCreate来执行 SSR 相关的逻辑。但在 Vue 3 的 Composition API 中，setup函数扮演了类似的角色。
Composition API 中的 SSR
在 Composition API 中，setup函数被视为beforeCreate和created的结合，因此在 SSR 过程中，setup函数也会在服务器端执行。以下是几个关键点：
setup函数执行时机：与beforeCreate和created类似，setup会在组件实例创建时执行，因此它也是 SSR 的一部分。- 异步初始化：可以使用
Suspense来进行异步组件的初始化，这对于 SSR 同样适用。
实例：在 SSR 中使用 Composition API
下面我们通过一个简单的示例来展示如何在 SSR 中使用 Composition API：
<template><div>{{ serverMessage }}</div></template><scriptsetup>import{ref,onBeforeMount}from'vue';// 定义一个 ref，它将在服务端和客户端都可见constserverMessage=ref('');// 这个函数会在 SSR 时执行defineOptions({preFetch:()=>{serverMessage.value='这个信息来自服务器端渲染！';}});// 打印信息以确认执行环境console.log('这段代码在服务端和客户端都会执行！');// 客户端特定的钩子onBeforeMount(()=>{console.log('这段代码只在客户端执行！');});</script>在这个例子中：
- defineOptions中的
preFetch函数将会在 SSR 期间被调用，用来设置serverMessage的值。 console.log在setup函数内会被执行，这意味着它会在服务器端和客户端都运行。- onBeforeMount钩子只在客户端执行，因为它依赖于 DOM 的挂载。
如何确定代码在 SSR 中执行？
要确定你的代码是否在 SSR 中执行，你可以使用console.log或其他日志记录方式：
- 如果你看到日志在终端（服务器端）出现，那么你的代码是在 SSR 中执行的。
- 如果日志只出现在浏览器的控制台，那么它是在客户端执行的。
通过这种方式，你可以清晰地分辨哪些部分的代码是在服务器端运行的，从而确保你的应用在 SSR 模式下能够正确工作。
结论
使用 Vue 3 的 Composition API 进行 SSR 开发时，理解setup函数的执行时机和如何利用 SSR 特定的 API 是非常重要的。通过实例，我们展示了如何编写通用的代码，同时也介绍了如何在 SSR 和 SPA 环境中进行区分和调试。希望这些信息对你编写高效、可靠的 SSR 应用有所帮助。
