# 介绍

# 新增功能

  1. 增量式更新（ISR）
  2. hybrid rendering：为不同的路由提供不同的渲染模式 ，client-side或者universal
  3. edge-side rendering

# 通用渲染

Universal Rendering，相当于是client-side和server-side的结合，在服务端直出页面的基础上，能保证浏览器后台处理js执行，来达到单页跳转效果，减少服务器调用。这一过程称为Hydration

# hooks

nuxt通过hook系统来提供强大的扩展能力，支持的hook包括：https://github.com/nuxt/framework/blob/a0c4d6e7e32f490d6f375340bffdc1d3b68a42eb/packages/schema/src/types/hooks.ts#L62

除了nuxt hooks还有runtime hooks (opens new window):

app:created	vueApp	When initial vueApp instance is created
app:beforeMount	vueApp	Same as app:created
app:mounted	vueApp	When Vue app is initialized and mounted in browser
app:rendered	-	When SSR rendering is done
app:suspense:resolve	appComponent	On Suspense resolved event
page:start	pageComponent	On Suspense pending event
page:finish	pageComponent	On Suspense resolved event
meta:register	metaRenderers	(internal)
vue:setup	-	(internal)
vue:error

# payload

服务端渲染在激活阶段会将数据传递给客户端，这部分的数据储存在nuxtApp.payload.data中

# 数据获取

nuxt中的数据获取都会默认缓存，只有在参数修改才会重新获取，或者手动使用refresh或者refreshNuxtData

# key

通过使用key来防止数据获取混乱，key被存放在nuxt实例的payload中，还在调用过程中的接口被存放在nuxt._asyncDataPromises

# useAsyncData

支持页面、组件、plugin在服务器端获取异步数据：

useAsyncData(key: string, fn: () => Object, options?: { lazy: boolean, server: boolean })

参数：

  1. key：唯一key，确保获取正确的数据
  2. fn: 返回一个异步函数的函数
  3. options:
    1. lazy: 是否在解析 async 函数之前加载路由（默认为 false）,useLazyAsyncData是这个配置的语法糖写法
    2. server:是否在服务器端获取数据（默认为 true）
    3. transform: 获得结果后对结果进行转换
    4. pick:提供一个数组，其中的值为接口返回数据中要包含的key（这样可以减少页面的内存消耗）

script setup支持顶级await

# useLazyAsyncData

即使是lazy也会在服务端预先获取数据，不需要写await

# useFetch

相当于useAsyncData的语法糖，不用再写key了

useFetch(url: string, options?)

参数：

  1. key: Provide a custom key

  2. Options from ohmyfetch (opens new window)

    1. method: Request method
    2. params: Query params
    3. baseURL: Base URL for request

  3. options中还支持useAsyncData中的options，同样提供语法糖写法：useLazyFetch

key的生成规则:

const key = "$f_" + (opts.key || hash([request, { ...opts, transform: null }]));

# State

# useState

创建全局共享的只读数据，只有在初始化时可以赋值。可以使用在page、component、plugin中,只能用在setup和生命周期钩子中

useState<T>(key: string, init?: (()=>T)): Ref<T>

永远不要在