Nuxt3中useFetch组合式函数选项的key属性有什么作用？

你可以把这个key直接理解成Nuxt给每次请求结果打的唯一身份标签，所有和请求缓存、去重相关的逻辑全靠这个标签识别：

• 首先是请求去重：同一个页面里不管多少个组件、多少处代码调用了地址、参数完全一致的接口，只要key相同，Nuxt就只会真的向后端发1次请求，所有调用的地方共享同一份返回结果，不会重复打接口浪费性能。你不传这个参数的时候，Nuxt会自动根据请求URL、请求方法、传的参数、请求头等配置生成对应key，普通写业务的时候大部分场景都不用手动传。
• 其次是适配SSR渲染逻辑：Nuxt做服务端渲染时，会先在服务端把所有useFetch的请求跑完，把拿到的数据嵌到返回给浏览器的HTML里。等浏览器加载完页面做初始化的时候，会靠key来匹配服务端已经提前拿好的数据，直接用就行，不会在客户端再重复发一遍一模一样的请求。如果key对不上，客户端认不出来服务端已经返回过数据，就会重新发请求，轻则拖慢页面加载速度，重则出现水合不匹配的报错、页面刚打开就闪一下内容跳变的问题。

哪些场景需要手动传key #

平时写简单业务不用特意加，碰到下面这几类情况再手动指定就好：

1. 同样的接口地址和参数，你需要拿多份独立的结果，不想共用缓存。比如页面顶部和底部都用了轮播组件，都调轮播图接口，但是顶部拿主会场轮播、底部拿推荐区小轮播，给两个请求分别传不同的key，就不会出现两边数据串用的问题。
2. 需要强制刷新请求缓存的时候，直接修改对应请求的key值，Nuxt检测到key变化，就会自动重新发请求拿最新数据，比手动调用刷新方法要方便。
3. 自己封装了通用的请求组合式函数的时候，多处复用很可能出现自动生成的key撞车的情况，手动传入唯一key就能避免不同位置的请求拿到错的缓存数据。

小提醒：手动传key一定要保证同一份数据对应的key唯一，别图省事全写死成同一个字符串，不然很容易出现不同请求撞key、数据乱串的bug。

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