【Vue计算属性详细介绍】

Vue计算属性详细介绍

1. 计算属性
2. 基本特点
3. 定义方法
4. Getter 和 Setter
5. 计算属性 vs 方法
6. 计算属性 vs 侦听器
7. 限制

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. 基本特点

性能优化：计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时才会重新计算，这意味着如果依赖没有发生变化，即便你多次访问该计算属性，其值也不会重复计算，而是直接返回缓存值。
响应式：计算属性本身是响应式的，如果计算属性依赖的数据发生变化，依赖于计算属性的任何视图或其他计算属性也会更新。
声明式：你只需要定义计算属性的getter函数，Vue会负责跟踪它依赖的所有响应式属性，并在它们发生改变时更新。

3. 定义方法

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

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

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

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

4. Getter 和 Setter

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

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