nuxt生命周期

• nuxt生命周期极为重要，分为客户端、服务端、客户端和服务端执行的api
• 有些api是客户端特点的api，如果在服务端执行会导致报错

注意nuxt3中onCreated生命周期了，因为vue3用setup替代了created初始化逻辑

判断执行环境

• 判断执行环境 import.meta.server/client 、process.server/process.client
• 使用 ClientOnly 组件处理环境差异

客户端

• 浏览器相关api

• 使用状态的生命周期

  • 因为状态的生命周期，依赖于DOM环境和浏览器特性，而服务端没有这些环境
  • 比如onMounted

• 添加交互性和事件侦听器

• 当组件涉及到dom的操作，需要用ClientOnly来包裹，确保只在客户端执行，避免在服务端执行渲染报错

服务端

• asyncData

客户端和服务端

• setup

• useFetch

• useAsyncData

  • 由于支持服务端和客户端，因此在服务端渲染期间拿到数据，客户端可以直接复用数据 （这样就可以避免在客户端重复获取数据）
  • 客户端执行期间，useAsyncData会检测在服务端渲染期间是否已经注入的数据，如果已经有数据了，那么就会直接复用，不会继续再请求

• useRuntimeConfig

  • 公共部分 (public) 在服务端和客户端都可用。
  • 私密部分 (private) 只能在服务端使用。

• useState

  • 在服务端和客户端共享状态，用于状态管理
  • 跨组件共享状态