Vue 基础怎么使用计算属性（Computed）处理数据的格式化与过滤-Vue.js-PHP中文网

计算属性是Vue中处理数据格式化、过滤及多状态组合的推荐方式，基于响应式依赖自动追踪、缓存与更新，高效且声明式。

vue 基础怎么使用计算属性（computed）处理数据的格式化与过滤

计算属性是 Vue 中处理数据格式化与过滤最推荐的方式，尤其在 Vue 3（Composition API）和 Vue 2 中都保持高度一致性和实用性。它不是简单地“写个函数”，而是基于响应式依赖自动追踪、缓存结果、按需更新的智能机制。

格式化数据：把原始值转成易读形式

当需要将日期、数字、字符串等做统一转换（如 “2026-08-20T10:30:00” → “2026年08月20日”），计算属性比 methods 更高效，也比过滤器（Vue 3 已移除）更现代、更可控。

直接在 computed 中编写逻辑，返回格式化后的值
依赖的数据（如 rawDate）一变，计算属性立刻重算并更新视图
多次使用同一个计算属性（比如模板里显示两次），不会重复执行函数，结果自动复用

示例（Vue 3 Composition API）：

过滤数据：动态筛选列表内容

搜索、分类、状态筛选等场景，本质是“输入变化 → 列表重过滤 → 视图更新”。计算属性天然适合这类响应式过滤，且逻辑清晰、可测试、易维护。

把原始数组（items）和筛选条件（searchQuery）作为依赖
每次 searchQuery 改变，filteredList 自动重新执行 filter()
避免在 v-for 中写冗长表达式，也不用在 methods 中手动调用

示例：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

const searchQuery = ref('')
const items = ref([{ name: '苹果' }, { name: '香蕉' }, { name: '橙子' }])
const filteredList = computed(() => {
  return items.value.filter(item =>
    item.name.includes(searchQuery.value)
  )
})

组合多个字段或状态做判断

当显示内容依赖多个响应式变量（如用户登录态 + 权限 + 当前页数据），计算属性能自然聚合这些依赖，生成一个语义明确的状态值。

比如 canEdit 同时看 isLoggedIn、userRole、item.status
所有依赖任意一个变化，canEdit 都会重新求值
比 watch 更声明式，比 methods 更轻量

示例：

const isLoggedIn = ref(false)
const userRole = ref('editor')
const item = ref({ status: 'draft' })
const canEdit = computed(() =>
isLoggedIn.value &&
(userRole.value === 'admin' || (userRole.value === 'editor' && item.value.status === 'draft'))
)