Vue按需渲染依赖精准依赖追踪：用computed订阅具体字段、拆分store模块、封装getter派生状态、对高频更新状态做防抖处理。
Vue 全局状态本身不会自动触发按需渲染，关键在于如何让组件只响应它真正关心的状态变化。直接把全局状态（比如 Vuex 或 Pinia store）的所有字段都绑定到模板中，反而容易引发不必要的重渲染。真正的“按需触发”，靠的是精准的依赖追踪和合理的状态组织方式。
用 computed 精确订阅所需字段
不要在模板里直接读取 store.state.xxx，而是通过 computed 显式声明依赖关系。Vue 的响应式系统会自动记录哪些 state 字段被访问过，仅当这些字段变化时才更新该 computed 及其关联的 DOM 片段。
例如：
- 错误写法：
{{ $store.state.user.profile.name }}—— 每次整个user对象更新都会触发渲染 - 推荐写法：
const userName = computed(() => store.user.profile.name)—— 只有profile.name变化才触发
拆分 store 模块，避免大对象耦合
把全局状态按业务域拆成细粒度模块（如 authStore、searchStore、uiStore），每个组件只导入并使用自己需要的那个 store 实例。这样既降低耦合，也天然隔离了响应式依赖范围。
立即学习“前端免费学习笔记（深入）”；
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
比如搜索页组件只需：
import { useSearchStore } from '@/stores/search'- 不引入
authStore，就不会监听登录态变化，也就不会因用户登出而意外重绘搜索区域
用 store 的 getters 或 mapGetters 做状态派生
对于需要组合多个状态才能得出的值（如“是否显示高级筛选”），应封装为 getter，而不是在组件内手动计算。getter 内部的依赖会被 Vue 自动收集，且只有依赖项变更时才重新求值。
示例：
- 定义：
showAdvancedFilter: (state) => state.search.mode === 'advanced' && state.auth.role === 'admin' - 使用：
computed(() => searchStore.showAdvancedFilter)—— 组件只响应mode和role两个字段的变化
对高频更新状态做防抖或节流处理
某些全局状态（如实时搜索关键词、滚动位置）可能频繁变更。若组件直接响应，会导致连续重渲染。可在 store 中用 ref + watchEffect + 防抖 控制更新节奏：
- 定义一个带防抖逻辑的派生状态：
const debouncedQuery = ref('') - 在 store setup 中监听原始 query 并延迟同步：
watch(query, debounce((v) => debouncedQuery.value = v, 300)) - 组件只订阅
debouncedQuery，而非原始输入
