当前位置：首页 > VUE

vue计算属性实现

2026-01-14 04:40:50VUE

计算属性的基本概念

计算属性是Vue中用于处理复杂逻辑的响应式属性，基于依赖的响应式数据自动缓存结果。当依赖数据变化时，计算属性会重新计算，否则直接返回缓存值。

基本语法实现

在Vue组件选项中通过computed定义计算属性：

export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}

模板中直接使用计算属性：

vue计算属性实现

<p>{{ fullName }}</p>

计算属性 vs 方法

计算属性具有缓存特性，而方法每次调用都会执行：

methods: {
  getFullName() {
    return this.firstName + ' ' + this.lastName
  }
}

方法调用需要加括号：

vue计算属性实现

<p>{{ getFullName() }}</p>

计算属性的setter

计算属性默认只有getter，需要时可添加setter：

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

计算属性的缓存机制

计算属性基于响应式依赖进行缓存。以下示例中，只要message未改变，多次访问reversedMessage会立即返回缓存值：

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

计算属性的依赖追踪

计算属性会自动追踪响应式依赖。以下示例中，当books数组变化时，publishedBooksMessage会自动更新：

data() {
  return {
    author: {
      name: 'John',
      books: [
        'Vue 2 Advanced',
        'Vue 3 Basics',
        'Vue 4 Future'
      ]
    }
  }
},
computed: {
  publishedBooksMessage() {
    return this.author.books.length > 0 ? 'Yes' : 'No'
  }
}