vue状态计算需按场景选机制：computed用于组件内派生状态并缓存；watch用于响应变化执行副作用；store getters/pinia computed用于跨组件共享逻辑；reactive+computed适合轻量共享。
Vue 中状态值的动态计算，核心在于“依赖响应式数据、按需更新、避免冗余执行”。它不是单纯写个函数就完事，而是要结合场景选对机制——该缓存时用 computed，该监听时用 watch，该集中管理时用 store 中的 getters 或组合式 store 逻辑。
用 computed 处理组件内派生状态
当计算结果只依赖当前组件的响应式数据（如 props、data、ref），且需要在模板中多次使用或参与渲染逻辑时，computed 是首选。它自动追踪依赖、自带缓存，不随渲染重跑。
- 比如表单中根据 name 和 surname 拼接 fullName：
fullName: () => `${state.name} ${state.surname}` - 过滤列表时，基于 searchKey 动态返回匹配项：
filteredList: () => list.filter(item => item.title.includes(state.searchKey)) - 注意：不要在 computed 里做副作用（如发请求、改 state），它只负责“算”，不负责“做”
用 watch 响应状态变化并触发计算逻辑
当某个状态变化后，需要执行异步操作、批量更新、或影响多个其他状态时，watch 更合适。它不返回值，但能精准响应变化时机。
- 例如监听用户选择的 category，然后调用 API 加载对应商品：
watch(() => state.category, (newVal) => { loadProducts(newVal) }) - 监听多个源时，可用数组或对象形式：
watch([() => state.a, () => state.b], ([a, b]) => { ... }) - 搭配
immediate: true可在初始化时也执行一次
在 Vuex/Pinia 中通过 getters 或 store 方法做跨组件计算
当计算逻辑涉及全局状态、被多个组件复用，或需与 mutation/action 协同时，应把计算逻辑抽到 store 层。
- Vuex 中用 getters：定义为函数，自动响应依赖的 state 变化，支持缓存，可传参（需返回函数）：
getters: { hasUnread: state => state.messages.filter(m => !m.read).length > 0 } - Pinia 中更简洁：直接在 store 定义 computed 属性，或用
computed包裹：export const useUserStore = defineStore('user', () => { const userInfo = ref({}); const displayName = computed(() => userInfo.value.name || '游客'); return { userInfo, displayName }; }) - 避免在组件中反复写相同逻辑，统一入口也便于测试和维护
用 reactive + computed 组合实现轻量级共享状态计算
对于中小型项目或无需完整 store 的场景，可以用一个独立的响应式对象 + computed 封装计算逻辑，既解耦又可控。
- 创建一个
const store = reactive({ count: 0, step: 2 }) - 导出计算属性：
const doubled = computed(() => store.count * store.step) - 多个组件导入同一 store 和 computed，共享逻辑且响应更新
- 比直接暴露 mutable 对象更安全，也比引入 Vuex/Pinia 更轻量
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
