什么是vue的计算属性

Vue的计算属性（Computed Properties）是Vue组件中的一个非常强大的功能，它们允许组件基于它们的响应式依赖进行缓存的派生值。只有当相关响应式依赖发生改变时，计算属性才会重新求值。这意味着只要依赖的响应式数据没有发生变化，多次访问计算属性会立即返回之前的计算结果，而不必再次执行计算函数。

特性

1. 基于它们的响应式依赖进行缓存：计算属性是基于它们的响应式依赖进行缓存的。只有在相关响应式依赖发生改变时才会重新求值。

2. 只有getter：默认情况下，计算属性只有getter函数，也就是说，它们默认是只读的。但是，你也可以提供一个setter函数，当尝试修改计算属性的值时，setter函数会被调用，这允许你对计算属性进行一些自定义的逻辑处理。

3. 依赖追踪：Vue会自动追踪计算属性依赖的响应式数据。当依赖的响应式数据发生变化时，Vue会自动重新计算计算属性的值。

使用场景

• 复杂的数据处理：当需要对组件的响应式数据进行一些复杂处理，但又不想在模板中编写过多的逻辑时，计算属性非常有用。

• 提高性能：由于计算属性具有缓存功能，当依赖的响应式数据没有变化时，计算属性不会重新计算，这可以提高应用的性能。

示例

假设你有一个Vue组件，组件的data中有一个名为message的响应式数据，你想要显示这个message的翻转字符串（即将字符串中的每个字符都进行翻转）。这时，你可以使用计算属性来实现：

<template>  
  <div>  
    <p>原始字符串: {{ message }}</p>  
    <p>翻转字符串: {{ reversedMessage }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello'  
    }  
  },  
  computed: {  
    // 计算属性  
    reversedMessage() {  
      // 这里返回message的翻转字符串  
      return this.message.split('').reverse().join('');  
    }  
  }  
}  
</script>

在这个例子中，reversedMessage是一个计算属性，它依赖于message数据。每当message的值发生变化时，reversedMessage计算属性会自动重新计算并返回新的翻转字符串。但是，如果message的值没有变化，多次访问reversedMessage将返回相同的缓存结果，从而提高性能。