计算属性

计算属性 (Computed Properties)

[基本用法]

VUE

<script setup>
import { ref, computed } from 'vue'

const count = ref(0)
const doubleCount = computed(() => count.value * 2)
</script>

<template>
  <p>原始值: {{ count }}</p>
  <p>计算值: {{ doubleCount }}</p>
</template>

[核心特性]

响应式依赖缓存

自动缓存：依赖变化时重新计算
与方法调用的区别：方法每次渲染都会执行

可写计算属性

VUE

const fullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})

TypeScript支持

PLAINTEXT

const double = computed(() => count.value * 2)  // 自动类型推导
const triple = computed<number>(() => count.value * 3)  // 显式类型声明

[最佳实践]

◆ 性能优化

避免在计算属性中： · 执行异步操作 · 修改DOM · 修改其他响应式变量

◆ 使用场景对比

场景	计算属性	方法	侦听器
派生数据	✅	❌	❌
需要缓存	✅	❌	❌
响应数据变化执行操作	❌	❌	✅
复杂计算	✅	❌	❌

[注意事项]

解构问题

// ❌ 错误解构

const { x, y } = computed(...)

// ✅ 正确方式 const { x, y } = toRefs(computed(...))

副作用限制

// ❌ 禁止在计算属性中修改状态

VUE

computed(() => {
  count.value++  // 危险操作！
})

复杂对象处理

VUE

const complexData = computed<{ id: number; name: string }>(() => {
  return { id: 1, name: 'Vue' }
})

[组合式API特殊用法]

VUE

1. 动态计算属性
function useDynamicComputed(getter) {
  return computed(getter)
}

2. 计算属性链
const base = ref(10)
const squared = computed(() => base.value ** 2)
const cubed = computed(() => squared.value * base.value)

[模板使用提示]

<p>{{ doubleCount }}</p> 

计算属性

计算属性

计算属性 (Computed Properties)

文章目录