当前位置：首页 > VUE

vue computed实现

2026-02-10 06:44:43VUE

Vue 中 computed 的实现

在 Vue 中，computed 是一种基于依赖关系缓存的属性，用于处理复杂逻辑或依赖其他数据的变化。computed 属性的值会根据其依赖的数据自动更新，且只有在依赖变化时才会重新计算。

基本语法

new Vue({
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function() {
      return this.message.split('').reverse().join('')
    }
  }
})

reversedMessage 是一个计算属性，其值依赖于 message。当 message 变化时，reversedMessage 会自动更新。

计算属性的缓存机制

计算属性是基于它们的依赖进行缓存的。只有在依赖发生变化时，计算属性才会重新计算。如果依赖没有变化，多次访问计算属性会直接返回缓存的结果，而不会重复执行计算逻辑。

computed: {
  now: function() {
    return Date.now()
  }
}

now 不会更新，因为它没有依赖任何响应式数据。

计算属性的 setter

计算属性默认只有 getter，但也可以提供 setter。

computed: {
  fullName: {
    get: function() {
      return this.firstName + ' ' + this.lastName
    },
    set: function(newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

调用 this.fullName = 'John Doe' 时，setter 会被触发，firstName 和 lastName 会相应更新。

计算属性 vs 方法

计算属性和方法都能实现类似的功能，但计算属性具有缓存优势。方法每次调用都会执行函数，而计算属性只有在依赖变化时才会重新计算。

methods: {
  reversedMessage: function() {
    return this.message.split('').reverse().join('')
  }
}

每次访问 reversedMessage() 都会执行函数，而计算属性 reversedMessage 只有在 message 变化时才会重新计算。

计算属性的依赖追踪

Vue 通过依赖追踪系统实现计算属性的响应式。当计算属性被访问时，Vue 会记录所有依赖的数据。当这些数据变化时，计算属性会重新计算。

computed: {
  sum: function() {
    return this.a + this.b
  }
}

sum 依赖于 a 和 b，当 a 或 b 变化时，sum 会重新计算。

计算属性的异步问题

计算属性是同步的，不支持异步操作。如果需要异步处理，可以使用 watch 或结合 methods 和 data。

data() {
  return {
    asyncData: null
  }
},
created() {
  fetchData().then(data => {
    this.asyncData = data
  })
},
computed: {
  processedData() {
    return this.asyncData ? this.asyncData.process() : null
  }
}

processedData 依赖于 asyncData，但异步操作需要在 created 或其他生命周期钩子中完成。

计算属性的性能优化

计算属性的缓存机制可以有效减少不必要的计算，但在依赖较多或计算逻辑复杂时，仍需注意性能。

避免在计算属性中执行复杂或耗时的操作，必要时可以将复杂逻辑拆分为多个计算属性或使用 watch 监听变化。

computed: {
  filteredList() {
    return this.list.filter(item => item.active)
  },
  sortedList() {
    return this.filteredList.sort((a, b) => a.order - b.order)
  }
}

将过滤和排序拆分为两个计算属性，可以提高可读性和性能。

vue computed实现