Vue 的计算属性是一种通过声明式定义方式来创建的属性，它相当于一个函数，提供了对已有数据进行处理
的方法，其返回值就是最终要在模板中渲染的数据。
Vue 计算属性可以方便地处理 Vue 实例中的数据，并且具有如下特点：
- 计算属性可以响应式地更新，只会在相关响应式数据发生变化时才会重新计算，并缓存其结果，所以计
算属性比较高效。而如果将计算逻辑直接放到模板中，则每次重渲染都需要重新执行函数。
- 计算属性可以基于其它响应式数据进行计算，可以简化模板中的表达式，使其更加易于阅读和维护。
- 计算属性可以使用 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 计算属性使得处理数据变得更加简单和易于维护，同时也提高了性能和可读性。因此，当我们需要对已有响应式数据进行一些复杂的处理时，使用计算属性会是非常好的选择。
