// 錯(cuò)誤示例
setup() {
  const state = reactive({})
  initCriticalData() // 直接調(diào)用高風(fēng)險(xiǎn)方法
  return { state }
}
// 正確示例
setup() {
  const state = reactive({})
  onMounted(() => {
    try {
      initCriticalData()
    } catch (e) {
      console.error('初始化失敗:', e)
      // 添加降級(jí)處理邏輯
    }
  })
  return { state }
}

// 當(dāng)user.profile未定義時(shí)，鏈?zhǔn)皆L問(wèn)將引發(fā)雪崩
<template>
  <div>{{ user.profile.social.wechat }}</div> 
</template>
// 使用可選鏈
<template>
  <div v-if="user?.profile?.social">
    {{ user.profile.social.wechat || '未綁定' }}
  </div>
</template>

// 危險(xiǎn)操作
const fetchData = async () => {
  const res = await axios.get('/api')
  data.value = res.data // 若組件已卸載將報(bào)錯(cuò)
}
// 安全寫(xiě)法
let isMounted = true
onMounted(async () => {
  try {
    const res = await axios.get('/api')
    if (isMounted) {
      data.value = res.data
    }
  } catch (e) {
    // 錯(cuò)誤處理
  }
})
onBeforeUnmount(() => {
  isMounted = false
})

<Parent>
  <Child>
    <GrandChild>
      <ProblemComponent />  
    </GrandChild>
  </Child>
</Parent>
// 解決方案
// 1、平面化數(shù)據(jù)結(jié)構(gòu)
const flatData = computed(() => {
  return treeData.flatMap(...) 
})
// 2、使用Teleport優(yōu)化渲染
<Teleport to="#modal-area">
  <DeepComponent />
</Teleport>

// 錯(cuò)誤案例
// global.js
let cache = null 
export const setCache = (data) => {
  cache = data // 多組件共享狀態(tài)
}
// Component.vue
import { cache } from './global.js'
onMounted(() => {
  console.log(cache.name) // 可能為null
})
// 正確實(shí)踐
// 使用Pinia狀態(tài)管理
export const useStore = defineStore('cache', {
  state: () => ({
    data: null
  }),
  actions: {
    setData(payload) {
      this.data = payload
    }
  }
})
// 組件內(nèi)安全使用
const store = useStore()
store.data?.name // 自動(dòng)安全訪問(wèn)

// 錯(cuò)誤案例
<el-select v-model="selected">
  <el-option 
    v-for="item in dynamicList" 
    :key="item.id"
    :value="item.value"
  />
</el-select>
// 正確實(shí)踐
<el-select v-model="selected">
  <template v-if="isLoaded">
    <el-option ... />
  </template>
  <el-option v-else value="loading..." disabled />
</el-select>

// 未初始化嵌套對(duì)象
const formData = reactive({
  user: {} // 缺少profile字段
})
// 模板中訪問(wèn)
{{ formData.user.profile.age }} // 報(bào)錯(cuò)!
// 完整初始化
const formData = reactive({
  user: {
    profile: {
      age: 0,
      name: ''
    }
  }
})
// 或使用可選鏈
{{ formData.user?.profile?.age }}