Vue 3 TypeScript 语法，如何使用生命周期钩子

语法：

代码：

<script setup lang="ts">
import { 
  onBeforeMount, 
  onMounted, 
  onBeforeUpdate, 
  onUpdated, 
  onBeforeUnmount, 
  onUnmounted 
} from 'vue'

onBeforeMount(() => {
  console.log('挂载前')
})

onMounted(() => {
  console.log('挂载完成')
})

onBeforeUpdate(() => {
  console.log('更新前')
})

onUpdated(() => {
  console.log('更新完成')
})

onBeforeUnmount(() => {
  console.log('卸载前')
})

onUnmounted(() => {
  console.log('卸载完成')
})
</script>

使用案例:

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { fetchDict, fetchList } from '@/api'

const dictData = ref<DictItem[]>([]) // 数据字典
const listData = ref<ListItem[]>([]) // 列表数据

// 1. 先加载数据字典，再加载列表数据
onMounted(async () => {
  await loadDict()    // 确保字典加载完成
  await loadList()    // 再加载列表
})

const loadDict = async () => {
  dictData.value = await fetchDict() 
  console.log('字典加载完成')
}

const loadList = async () => {
  listData.value = await fetchList(dictData.value) // 可能依赖字典数据
  console.log('列表加载完成')
}
</script>

交流群：926055344