computed 返回 undefined 会导致模板报错，修复需检查依赖是否就绪、统一返回数组类型、用 Array.isArray 校验；模板中应兜底为 v-for="item in templateOptions || []"。
computed 里返回 undefined 导致模板渲染异常
这是最常见也最容易被忽略的问题：你在 computed 或 watch 中写了条件提前 return，却没意识到这会让响应式值变成 undefined。Vue 模板里一旦读取这个值（比如 v-for="item in templateOptions"），就会直接报错 Cannot read property 'length' of undefined。
- 别用
Object.keys(arr).length === 0判断数组是否为空——arr是数组时，Object.keys(arr)返回['0', '1', ...]，但空数组会返回空数组，不是你想的“对象键个数为 0” - 禁止在计算属性中混用
return和return []：要么统一返回数组，要么用?? []在模板层兜底（但不推荐，掩盖问题） - 如果依赖数据（比如
categories）还没加载完，就急着处理filteredTemplates.value，结果它还是undefined或空对象，后续映射必然失败
templateOptions 计算属性类型不一致的修复写法
核心是三点：检查前置依赖、规范数据来源、统一返回类型。下面这段代码能覆盖 95% 的场景：
const templateOptions = computed(() => {
// 1. 先看依赖是否 ready
if (categories.length === 0) return []
// 2. 取值并 fallback 为空数组
const currentTemplates = filteredTemplates.value || []
// 3. 类型校验 + 映射，不满足就返回 []
if (!Array.isArray(currentTemplates) || currentTemplates.length === 0) {
return []
}
return currentTemplates.map(template => ({
value: template?.id ?? '',
label: template?.name ?? ''
}))
})
注意：filteredTemplates.value 是 ref 或 computed 的值，必须确保它确实已定义；如果它本身是异步请求的结果，还要确认请求已完成且没被 cancel。
为什么不能用 Object.keys() 判断数组？
Object.keys([]) 返回 []，Object.keys({}) 也返回 []，但 [] 和 {} 完全是两种类型。你写 if (Object.keys(filteredTemplates.value).length === 0)，等于把空数组和空对象、甚至 null 都当成“没有数据”，结果就是模板里拿到一个 undefined 却还在遍历。
-
Array.isArray(val)是唯一可靠的数组类型判断 -
val?.length === 0只适用于已知是数组或类数组的对象，对null/undefined会报错，必须先判空 - 不要依赖
JSON.stringify(val).length或其他间接方式，性能差且不可靠
模板里怎么安全使用 templateOptions？
即使逻辑层修复了，模板里仍建议加一层防御：
- 用
v-for="item in templateOptions || []"强制兜底，避免运行时报错 - 如果用了
el-select或类似组件，确认它的optionsprop 接收的是数组，不是undefined - 调试时在控制台打印
console.log(JSON.stringify(templateOptions))，看实际值是[]还是undefined，再反推哪一步出问题
真正容易被忽略的点是：计算属性的依赖链很长，filteredTemplates 本身可能来自另一个 computed，而那个 computed 又依赖异步数据——只要其中一环没处理好，undefined 就会一路透传到模板。
