计算属性名本身不会触发eslint“未定义变量”警告，但模板中引用的计算属性若未在computed中正确定义（拼写错误、遗漏声明等），eslint会按js语义报no-undef警告；需确保名称一致、正确声明、避免this绑定失效、做好空值防护，并配置eslint-plugin-vue及相应解析器。
计算属性名本身不会直接导致静态检查工具报“未定义变量”，但当你在模板中引用一个本应是计算属性的标识符，而它实际未被正确定义（比如拼写错误、遗漏 computed 声明、或被误写成普通变量），ESLint 等工具就会按 JavaScript 语义判定该变量未声明，从而触发 no-undef 或 no-unused-vars 类警告。
确认计算属性是否真实存在且拼写一致
Vue 的计算属性必须显式声明在 computed 选项中，且名称需与模板中使用的完全一致（区分大小写）。若模板里写的是 {{ userFullName }}，但 computed 中定义的是 fullName 或 userfullname，ESLint 就会认为 userFullName 是未声明的全局变量。
- 检查
computed对象内部是否有对应键名，且值为函数 - 注意 Vue 2 与 Vue 3 的写法差异：Vue 2 支持函数式写法和 getter/setter 对象；Vue 3 Composition API 中需用
computed(() => ...)并正确return或解构赋值 - 避免在
computed中使用箭头函数直接返回（如fullName: () => this.firstName + ' ' + this.lastName），这会导致this绑定失效，ESLint 可能无法识别依赖项，间接引发未定义判断
避免在计算属性内部访问未初始化的响应式数据
即使计算属性已声明，若其函数体中读取了 data 或 props 中尚未定义的字段（例如 this.profile.address.city，但 profile 初始为空对象或 undefined），ESLint 虽不报错，但运行时会抛出 Cannot read property 'address' of undefined。部分严格配置的插件（如 @typescript-eslint）可能提前标记这类潜在未定义路径。
- 对深层嵌套属性做空值防护：用可选链
this.profile?.address?.city（需环境支持）或逻辑判断this.profile && this.profile.address && this.profile.address.city - 确保
data中初始值结构完整，例如profile: { address: {} }，而非profile: null - 在
props中为可能缺失的字段设置默认值，尤其是对象类型：profile: { type: Object, default: () => ({ address: {} }) }
排除 ESLint 误报：校准规则与作用域解析
ESLint 默认不理解 Vue 的响应式上下文，可能把 computed 属性误判为未声明变量。需通过插件启用 Vue 特定解析能力。
- 安装并配置
eslint-plugin-vue，并在.eslintrc.js中启用vue/valid-defined-props和vue/this-in-template等规则 - 确保 parser 为
@babel/eslint-parser或vue-eslint-parser，并正确设置parserOptions.parser指向 Babel 解析器（尤其在<script setup></script>场景下） - 若使用 TypeScript，搭配
@typescript-eslint/eslint-plugin，并开启explicit-function-return-type和no-explicit-any，能更早暴露类型层面的未定义风险
模板中谨慎使用计算属性前的防御性判断
即使计算属性已正确定义，若其依赖的数据异步加载中，首次渲染时可能返回 undefined，进而导致后续模板中 {{ userInfo.name }} 报错。此时静态检查虽不报错，但运行时异常会影响体验。
- 用
v-if包裹依赖计算属性的区块，例如<div v-if="userInfo">{{ userInfo.name }}</div> - 在计算属性内部做兜底处理，例如
userInfo() { return this.rawUser || { name: '', email: '' } } - 结合
??空值合并操作符：{{ userInfo?.name ?? '暂无姓名' }}
