成也缓存，败也缓存

在使用useAsyncData/useLazyAsyncData时，一定要使用唯一key，不然缓存会冲突导致数据混乱

1
2
3
4
const { data: video, error } = await useAsyncData(`video-${id}`, () =>
  $fetch(`/api/video/${id}`), {
  default: () => null,
})

不要直接在顶层作用域里使用异步数据

使用watchEffect、onMounted、computed等函数式的写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
watchEffect(() => {
  // video 是上一步从数据库中加载的异步数据
  if (video) {
    useHead({
      title: video.value?.vod_name,
      script: [{
        type: 'application/ld+json',
        textContent: JSON.stringify({
          '@context': 'https://schema.org',
          '@type': 'VideoObject',
          'name': video?.value?.vod_name,
          'description': video?.value?.vod_content,
          'uploadDate': video?.value?.last_updated,
          'thumbnailUrl': video?.value?.sources,
        }),
      }],
      meta: [
        {
          name: 'description',
          content: video.value?.vod_content || `this is ${video.value?.vod_name}` || 'title',
        },
      ],
    })
  }
})