什么是vue的计算属性？为什么使用？

Vue 的计算属性是一种通过声明式定义方式来创建的属性，它相当于一个函数，提供了对已有数据进行处理的方法，其返回值就是最终要在模板中渲染的数据。

Vue 计算属性可以方便地处理 Vue 实例中的数据，并且具有如下特点：

1. 计算属性可以响应式地更新，只会在相关响应式数据发生变化时才会重新计算，并缓存其结果，所以计算属性比较高效。而如果将计算逻辑直接放到模板中，则每次重渲染都需要重新执行函数。
2. 计算属性可以基于其它响应式数据进行计算，可以简化模板中的表达式，使其更加易于阅读和维护。
3. 计算属性可以使用 setter 来实现双向数据绑定，即当计算属性作为 v-model 的绑定对象时，可以通过计算属性的 setter 函数来更新源数据。

下面是一个简单的计算属性的示例，用于将一个字符串首字母转换为大写：

<template>
  <div>{{ capitalizedText }}</div>
</template>

<script>
export default {
  data() {
    return {
      text: 'hello world',
    };
  },
  computed: {
    capitalizedText() {
      return this.text.charAt(0).toUpperCase() + this.text.slice(1);
    },
  },
};
</script>

在上述代码中，我们定义了一个计算属性 capitalizedText，它基于响应式数据 text 进行计算，并返回一个新的字符串，该字符串的首字母被转换为大写。在模板中，我们直接使用了 capitalizedText 属性来渲染结果。

总之，Vue 计算属性使得处理数据变得更加简单和易于维护，同时也提高了性能和可读性。因此，当我们需要对已有响应式数据进行一些复杂的处理时，使用计算属性会是非常好的选择。