Vue3调度器错误解析完美解决Unhandled error during execution of scheduler flush的问题

// 错误示例
setup() {
  const state = reactive({})
  initCriticalData() // 直接调用高风险方法
  return { state }
}
// 正确示例
setup() {
  const state = reactive({})
  onMounted(() => {
    try {
      initCriticalData()
    } catch (e) {
      console.error('初始化失败:', e)
      // 添加降级处理逻辑
    }
  })
  return { state }
}

// 当user.profile未定义时，链式访问将引发雪崩
<template>
  <div>{{ user.profile.social.wechat }}</div> 
</template>
// 使用可选链
<template>
  <div v-if="user?.profile?.social">
    {{ user.profile.social.wechat || '未绑定' }}
  </div>
</template>

// 危险操作
const fetchData = async () => {
  const res = await axios.get('/api')
  data.value = res.data // 若组件已卸载将报错
}
// 安全写法
let isMounted = true
onMounted(async () => {
  try {
    const res = await axios.get('/api')
    if (isMounted) {
      data.value = res.data
    }
  } catch (e) {
    // 错误处理
  }
})
onBeforeUnmount(() => {
  isMounted = false
})

<Parent>
  <Child>
    <GrandChild>
      <ProblemComponent />  
    </GrandChild>
  </Child>
</Parent>
// 解决方案
// 1、平面化数据结构
const flatData = computed(() => {
  return treeData.flatMap(...) 
})
// 2、使用Teleport优化渲染
<Teleport to="#modal-area">
  <DeepComponent />
</Teleport>

// 错误案例
// global.js
let cache = null 
export const setCache = (data) => {
  cache = data // 多组件共享状态
}
// Component.vue
import { cache } from './global.js'
onMounted(() => {
  console.log(cache.name) // 可能为null
})
// 正确实践
// 使用Pinia状态管理
export const useStore = defineStore('cache', {
  state: () => ({
    data: null
  }),
  actions: {
    setData(payload) {
      this.data = payload
    }
  }
})
// 组件内安全使用
const store = useStore()
store.data?.name // 自动安全访问

// 错误案例
<el-select v-model="selected">
  <el-option 
    v-for="item in dynamicList" 
    :key="item.id"
    :value="item.value"
  />
</el-select>
// 正确实践
<el-select v-model="selected">
  <template v-if="isLoaded">
    <el-option ... />
  </template>
  <el-option v-else value="loading..." disabled />
</el-select>

// 未初始化嵌套对象
const formData = reactive({
  user: {} // 缺少profile字段
})
// 模板中访问
{{ formData.user.profile.age }} // 报错!
// 完整初始化
const formData = reactive({
  user: {
    profile: {
      age: 0,
      name: ''
    }
  }
})
// 或使用可选链
{{ formData.user?.profile?.age }}