计算属性Getter逻辑抽离是将computed内部响应式逻辑封装为可复用函数，解决重复、难维护、难测试问题；基础模式为纯函数，增强模式返回computed实例，进阶支持多依赖响应式追踪。
在 Vue 3 的组合式 API 中，计算属性（computed）本质是响应式 getter 函数的封装。所谓“Getter 逻辑抽离封装”，核心目标是把原本写在 setup() 或 script setup 内部的 computed(() => ...) 表达式，提取为可复用、可测试、职责清晰的独立函数。
为什么需要抽离 Getter 逻辑？
直接在组件内写 computed(() => a.value + b.value * 2) 看似简洁，但当逻辑变复杂（如多层嵌套、条件判断、格式化、依赖多个 ref/state）、或多个组件需复用相同样本计算规则时，就会出现重复、难维护、难单元测试等问题。抽离后，计算逻辑与组件解耦，便于复用和验证。
如何封装一个可复用的计算属性 Getter？
关键不是封装 computed 本身，而是封装其内部的响应式 getter 函数——即返回一个接收响应式源并返回响应式结果的工厂函数。它通常不直接调用 computed，而是交由使用者决定何时响应式包装。
-
基础模式：纯函数式 Getter
封装一个接收 ref 或 reactive 对象、返回派生值的函数（非响应式），适合简单逻辑或配合computed使用：
// composables/useFullName.js
export function getFullName(firstName, lastName) {
return `${firstName?.trim() || ''} ${lastName?.trim() || ''}`.trim();
}
// 组件中使用
import { getFullName } from '@/composables/useFullName';
import { computed, ref } from 'vue';
const firstName = ref('John');
const lastName = ref('Doe');
const fullName = computed(() => getFullName(firstName.value, lastName.value));
```
-
增强模式：返回 computed 的工厂函数
更进一步，封装一个返回computed实例的函数，内部自动处理响应式依赖，调用者只需传入 ref/reactive：
// composables/useSortedItems.js
import { computed } from 'vue';
export function useSortedItems(itemsRef, compareFn = (a, b) => a.localeCompare(b)) {
return computed(() => [...(itemsRef.value || [])].sort(compareFn));
}
// 组件中
const items = ref(['c', 'a', 'b']);
const sorted = useSortedItems(items); // 直接得到 computed Ref
```
-
进阶：支持自定义依赖与副作用
若计算逻辑需监听额外信号（如筛选关键词、排序字段），可将这些也作为参数传入，并统一纳入computed依赖追踪：
// composables/useFilteredAndSorted.js
import { computed } from 'vue';
export function useFilteredAndSorted(listRef, filterRef, sortKeyRef, sortOrderRef = ref('asc')) {
return computed(() => {
let result = listRef.value || [];
if (filterRef.value) {
result = result.filter(item =>
item[sortKeyRef.value]?.toString().includes(filterRef.value)
);
}
return result.sort((a, b) => {
const aVal = a[sortKeyRef.value];
const bVal = b[sortKeyRef.value];
const diff = aVal > bVal ? 1 : aVal return sortOrderRef.value === 'desc' ? -diff : diff;
});
});
}
```
注意事项与最佳实践
- 避免在封装函数内部调用
ref()或reactive()—— 响应式数据应由调用方提供，保持函数无副作用、可预测； - 不要在 getter 封装里执行异步操作或产生副作用（如
console.log、API 调用）—— 计算属性必须是同步且无副作用的纯函数； - 命名建议以
getXXX（纯函数）或useXXX（返回 computed/ref 的组合式函数）区分语义； - 配合 TypeScript 时，为入参和返回值标注明确类型，提升可读性与安全性；
- 复杂业务计算若涉及缓存、防抖、节流等需求，更适合用
useMemo-风格自定义 Hook（基于onBeforeUpdate或watchEffect），而非强行塞进computed。
小结：抽离的本质是关注点分离
Getter 逻辑抽离不是为了炫技，而是让组件只关心“用什么”，而不操心“怎么算”。把计算规则沉淀为可组合、可配置、可测试的函数，是构建健壮 Vue 3 应用的重要习惯。实际项目中，从 getDisplayName 到 useSearchResults，尺度可大可小，关键是让逻辑归位、职责清晰。
立即学习“前端免费学习笔记（深入）”；
