【Vue计算属性详细介绍】

1. 计算属性

计算属性（Computed properties）是Vue框架中一个非常重要的概念，它们用于声明式地定义可供模板读取的响应式的属性，通常依赖于组件的数据，并且只有当它们的依赖值发生变化时才会重新计算。

计算属性用于快速计算视图（View）中显示的属性，这些计算将被缓存，并且只在需要时更新

使用场景：当一个属性需要复杂的逻辑运算之后才能获取其值，可以使用计算属性，在一个计算属性中可以完成各种复杂的逻辑，包括运算，方法调用等，只要最终返回一个结果就可以了

声明计算属性的格式：

computed:{
   xxx:function(){

   }
}

示例： 使用计算属性，计算书本的总价
定义测试数据，和计算属性，计算属性遍历书本记录，计算总价

var vm = new Vue({

    el: '#app',

    data: {
        //定义测试数据
        books: [
            {name:'红楼梦', price:"120"},
            {name:'三国演义', price:"100"},
            {name:'水浒传', price:"90"},
        ]
    },

    //计算属性
    computed: {
        compTotal: function() {
            let sum = 0;
            for(index in this.books) {
                sum += parseInt(this.books[index].price);
            }
            return sum;
        }
    }

});

计算属性在页面中的使用

<div v-for="book in books">
    {{book.name}} -> {{book.price}}
</div>

<div>
    总价：{{compTotal}}
</div>

关于var 与 let

var声明为全局属性
let为ES6新增，可以声明块级作用域的变量（局部变量）
建议使用let声明变量

计算属性的主要特点和用法如下所述：

2. 基本特点

1. 性能优化：计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时才会重新计算，这意味着如果依赖没有发生变化，即便你多次访问该计算属性，其值也不会重复计算，而是直接返回缓存值。

2. 响应式：计算属性本身是响应式的，如果计算属性依赖的数据发生变化，依赖于计算属性的任何视图或其他计算属性也会更新。

3. 声明式：你只需要定义计算属性的getter函数，Vue会负责跟踪它依赖的所有响应式属性，并在它们发生改变时更新。

3. 定义方法

在组件的计算属性区域内，以键值对的形式定义，键是计算属性名，值是一个函数，这个函数的返回值将作为计算属性的值。

computed: {
  // 定义一个计算属性fullAddress
  fullAddress: function () {
    return this.address.street + ', ' + this.address.city;
  }
}

在模板或其他计算属性中，可以像访问常规属性那样访问计算属性fullAddress：

<p>地址: {{ fullAddress }}</p>

4. Getter 和 Setter

默认情况下，计算属性是只读的，但你也可以提供一个setter，当你需要在设置计算属性时执行一些操作。

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

通过设置fullName，Vue会自动分配firstName和lastName。

5. 计算属性 vs 方法

你可以将同样的函数定义为一个方法而不是计算属性，两者之间的区别是计算属性是基于它们的依赖进行缓存的，相比之下，方法调用将总是执行该函数，每次触发重新渲染时它们都会被调用。

6. 计算属性 vs 侦听器

Vue 也提供了一种方法来观察和响应数据变化，即侦听器（watchers），然而，通常更推荐使用计算属性而不是命令式地处理数据变化：

• 计算属性是基于数据的变化声明式地定义最终展示的数据，代码更清晰和简洁。
• 侦听器适合执行响应数据变化的异步操作或较为复杂的逻辑。

7. 限制

在使用计算属性时，应注意以下限制：

• 不应在计算属性内部执行异步操作，因为计算属性的返回值不会等待异步操作完成。
• 不能在计算属性的getter函数中修改其依赖的响应式数据，这样会引起不可预见的结果。

在实际开发中，适当使用计算属性可以极大提升应用的性能和可维护性，尽量利用计算属性提供的缓存和响应式特性，编写清晰且高效的代码。