vue3解决服务端渲染程序ssr运行报错requestAnimationFrame is not defined

在服务端渲染（SSR）的情况下，由于服务端环境并不具备浏览器提供的`requestAnimationFrame`（raf）函数，所以当你尝试在SSR的过程中使用raf时，会导致程序报错，提示“requestAnimationFrame is not defined”。

Vue 3中，你可以使用`@vue/server-renderer`包来进行SSR。为了解决这个问题，Vue 3提供了`isServerRendering`方法来判断当前代码是否在服务端执行。你可以使用这个方法来判断是否应该执行与客户端相关的代码，比如使用`requestAnimationFrame`的代码。

如果你的代码在客户端和服务端都需要运行，你可以使用条件编译来确保服务端代码不会执行到客户端特有的代码。例如，在Vue组件中，你可以这样写：

export default {
  mounted() {
    if (process.client) {
      // 这里写只有客户端才需要执行的代码
      window.requestAnimationFrame(() => {
        // 你的动画逻辑
      });
    }
  }
};

或者，如果你是在非Vue的环境或者需要更通用的解决方案，可以使用`isServerRendering`来包裹相关代码：

import { isServerRendering } from '@vue/server-renderer';

if (!isServerRendering()) {
  // 这里写只有客户端才需要执行的代码
  window.requestAnimationFrame(() => {
    // 你的动画逻辑
  });
}

这样，在服务端渲染的过程中，`requestAnimationFrame`相关的代码就不会被执行，避免了运行时错误。