Vue.js中组件状态的“局部化”指状态限定于组件内、随实例创建销毁而隔离；“单例化”则需脱离组件生命周期，通过独立响应式对象或provide/inject实现跨组件共享，二者本质互斥但可通过局部代理+单例数据源等模式兼顾。
Vue.js 中组件内部状态管理的“局部化”和“单例化”是两个不同维度的概念，不能混为一谈——局部化指状态作用域限定在组件内，不污染全局；单例化则强调整个应用中只存在一个实例（如共享状态），通常需脱离组件实例生命周期。二者常被误认为可同时实现，但实际存在本质张力：局部化天然排斥单例化，而单例化必然突破局部边界。
局部化：靠 setup() 或 data() 自然实现
Vue 组件默认就是局部状态容器。每次组件被创建，data() 返回新对象，setup() 中声明的 ref / reactive 变量也仅属于当前实例。这是 Vue 的设计前提，无需额外操作。
- 函数式组件或 script setup 中定义的 ref、computed、watch 都绑定到当前组件实例，卸载后自动回收
- 避免在 setup() 外部或模块顶层直接声明响应式变量（如 export const count = ref(0)），否则会变成跨组件共享，破坏局部性
- 父子组件间传递状态应通过 props / emit，而非共用同一 ref —— 否则局部性即失效
单例化：需主动脱离组件生命周期
若真需要“单例状态”，必须将其移出组件作用域，常见方式是用独立的响应式对象配合模块导入导出，或使用 provide/inject + 懒初始化。
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
- 推荐方式：在单独文件中定义并导出一个 reactive 对象（如 store.js），所有组件 import 使用，但注意这不是 Vuex/Pinia，只是轻量共享
- provide/inject 可实现“局部单例”——父组件 provide 一次，后代组件 inject 获取同一引用，适合插件或跨多层组件的状态协调
- 慎用全局挂载（如 app.config.globalProperties.$shared），易引发命名冲突与内存泄漏，且难以测试
局部 + 单例？折中方案：按需懒初始化的局部代理
某些场景既想复用逻辑又不想全局污染，可用“局部代理 + 单例数据源”的模式：组件内部持有一个本地 ref，但其值由外部单例 store 计算或同步而来。
- 例如：组件内 const localFilter = ref(store.activeFilter)，再 watch store 变更同步 localFilter，保持响应但隔离变更权限
- 使用 computed({ get, set }) 包装单例字段，set 中触发 store 提交，get 返回 store 值，让组件像操作本地状态一样使用
- 这种模式下，组件仍具局部视图控制权，而数据源头唯一，兼顾可控性与一致性
别踩坑：单例不等于全局，局部不等于不可复用
状态管理的粒度应由业务语义决定，而非技术惯性。一个表单组件的状态天然该局部；一组筛选条件可能需跨多个组件保持一致，才值得抽成单例。
- 不要为“复用”强行单例化——先问：这个状态是否真的需要被多个组件同时读写且保持同步？
- 不要把组合式函数（composable）等同于单例——useCounter() 每次调用都返回全新 ref，这才是正确的复用姿势
- Pinia store 是单例，但它的 state 是响应式的，每个组件 inject 使用时仍是安全的局部视角，这才是现代 Vue 推荐的平衡点
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
