响应式变量命名需体现作用域、响应类型和业务语义：ref变量统一加Ref后缀，reactive对象用单数名词+业务主体，全局变量加global前缀，布尔型以is/has/can开头，异步状态用动词+名词+状态组合，并配套ESLint、代码片段和类型别名工具保障落地。
在大型项目中，响应式变量的命名不能只靠“看着顺眼”，而要建立可识别、可追溯、可自动化校验的命名体系。核心是让变量名本身携带三类信息：作用域（全局/组件级/局部）、响应类型（ref/reactive）、业务语义（做什么用），避免靠注释或上下文猜意图。
按响应式类型分层命名，一眼区分 ref 与 reactive
Vue3 中 ref 和 reactive 行为差异大（.value 访问、解包逻辑、响应式深度），混用易出错。命名上需强制体现类型特征：
-
ref 变量统一加后缀 Ref：如
searchQueryRef、isSubmittingRef、userListRef。不写后缀时容易误以为是普通值，模板里直接用{{ searchQuery }}却忘了它是 ref，导致渲染为空。 -
reactive 对象统一不加后缀，但必须用名词单数 + 明确业务主体：如
formState（非form或formReactive）、tableConfig、apiResponse。避免用data、info等泛化词，否则无法判断其结构和用途。 - 禁止混合命名：不接受
userInfo（reactive）和userName（ref）并存——二者语义层级不一致，应统一为currentUser（reactive）或拆出currentUserNameRef（仅当需单独响应式更新时）。
按作用域分级前缀，明确变量生命周期边界
大型项目常含多层嵌套组件、组合式函数（composable）和全局状态。命名前缀能快速定位变量归属，减少误修改风险：
-
全局状态变量加 global 前缀：如
globalThemeRef、globalUserState。这类变量通常由 pinia store 或 provide/inject 注入，前缀提醒开发者“改它会影响整个应用”。 -
组合式函数内变量加 use 后缀标识来源：如
useFetchDataRef、useTableState。不是指函数名，而是该变量由useXXX()返回，便于调试时回溯逻辑链。 -
组件内局部响应式变量不加前缀，但必须带业务动词或状态词：如
isMenuOpen（布尔）、pendingAction（进行中动作）、filteredItems（派生结果）。拒绝temp、data1、flag等无意义命名。
绑定业务语义，用名字代替文档说明
变量名是代码的第一份文档。大型项目中，一个变量可能被 5 个组件、3 个 hooks 引用，命名必须自解释：
- 布尔型变量强制使用
is/has/can/should开头：如isDarkModeEnabled（非darkMode）、hasUnsavedChanges（非unsaved）。这直接表达真值含义，避免取反逻辑混乱。 - 异步状态变量组合动词 + 名词 + 状态：如
fetchingUserProfile（进行中）、fetchedUserProfile（已完成）、fetchUserProfileError（错误）。比loading、data、error更精准，尤其在多个请求共存时。 - 避免缩写歧义：用
authenticationToken而非authToken（auth 可指 authentication 或 authorization），用navigationHistory而非navStack（stack 不一定准确反映浏览器历史机制）。
配套工具链，让规范自动落地不靠自觉
再好的命名规则，没有工具兜底就会退化。建议三项必配措施：
- ESLint 插件
@vue/eslint-plugin启用vue/valid-definition-name和自定义正则规则，拦截不符合*Ref/is*/global*模式的声明。 - VS Code 添加代码片段（snippets），输入
refb自动展开为const xxxRef = ref<boolean>(false)</boolean>，输入react展开为const xxx = reactive({})，从编码起点约束习惯。 - 在项目
types/index.d.ts中补充类型别名，如type FormState = typeof formState，配合 IDE 的 hover 提示，让变量名+类型共同构成完整语义。
