当前位置：首页 > VUE

computed vue 实现

2026-02-10 03:27:13VUE

computed 在 Vue 中的实现

在 Vue 中，computed 是一种基于响应式依赖进行缓存的属性，适合处理复杂逻辑或需要频繁计算的场景。以下是如何在 Vue 中实现 computed 的详细说明：

基本语法

在 Vue 组件中，computed 通常以对象形式定义，包含一个或多个计算属性。每个计算属性可以是一个函数（getter）或包含 get 和 set 的对象。

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    // 仅 getter 的形式
    fullName() {
      return `${this.firstName} ${this.lastName}`
    },
    // 包含 getter 和 setter 的形式
    reversedName: {
      get() {
        return this.fullName.split('').reverse().join('')
      },
      set(value) {
        const reversed = value.split('').reverse().join('')
        this.fullName = reversed
      }
    }
  }
}

计算属性的特性

缓存机制：计算属性基于响应式依赖缓存结果，只有当依赖的响应式数据（如 data 中的属性）发生变化时才会重新计算。
响应式更新：依赖变化时，计算属性会自动触发更新，并通知模板重新渲染。
适合复杂逻辑：相比直接在模板中写表达式，computed 更易维护和测试。

与方法的区别

虽然可以通过方法（methods）实现类似功能，但计算属性的优势在于：

性能优化：方法每次调用都会重新执行，而计算属性会缓存结果。
模板简洁：计算属性在模板中像普通属性一样使用，无需调用函数。

// 方法实现（每次调用都会执行）
methods: {
  getFullName() {
    return `${this.firstName} ${this.lastName}`
  }
}

与侦听器的区别

watch 适用于监听特定数据变化并执行副作用（如异步操作），而 computed 更适合派生状态的计算。

watch: {
  firstName(newVal) {
    console.log('firstName changed:', newVal)
  }
}

在组合式 API 中的使用

Vue 3 的组合式 API 中，computed 通过 vue 包提供的函数实现：

computed vue 实现

import { ref, computed } from 'vue'

const firstName = ref('John')
const lastName = ref('Doe')

// 计算属性
const fullName = computed(() => {
  return `${firstName.value} ${lastName.value}`
})

// 可写计算属性
const writableFullName = computed({
  get() {
    return `${firstName.value} ${lastName.value}`
  },
  set(newValue) {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})