前言
在Vue2的体系中，计算属性computed可谓是一个十分重要的工具，不仅能够帮助我们简化计算逻辑，而且能够优化应用的性能，相关问题在面试中也经常被问到。那么computed计算属性究竟有什么魅力呢，接下来随作者一起进入computed相关知识的分享吧！
概念规则
定义
计算属性，能够当作data使用的属性，但意义在于处理计算逻辑。在optionsAPI中与data、methods、watch、direactive、components以及生命周期钩子等配置项层级一致，都属于options的一层对象。
computed实际需要根据已定义属性的依赖进行计算而来，计算出来的值存在于vm或者vc实例中，与data一致的读取方式。
但首次读取后，若不改变依赖数据的值，再次读取不会执行计算逻辑。
export default {
data() {
return {}
},
created() {},
mounted() {},
computed: {},
methods: {},
}原理
底层与Vue响应式原理类似，借助Object.definepropty中的get和set方法。计算属性中，Vue会收集存在于计算属性中的响应式数据，并对其监听。
读取属性时，判断缓存中是否存在值，若存在直接取值返回，若不存在则执行计算逻辑。
修改依赖时，Vue会监听到依赖的数据发生了变化，并重新执行计算逻辑。
完整写法
对象写法，设置一个叫total的计算属性，分别有get和set方法，set方法在绝大多数情况下不会使用，毕竟计算属性是为了简化计算逻辑，简明逻辑意义使用的，如果使用了set方法，整个逻辑会更加混乱。
如果在set中直接赋值当前的计算属性，不会执行get方法。因为get方法只与其收集的响应式依赖有关，未修改依赖属性的值不会触发。
export default {
data () {
return {
goods: [
{
id: 1,
name: '苹果',
price: 2,
count: 0
},
{
id: 2,
name: '菠萝',
price: 6,
count: 0
}
]
}
},
computed: {
total: {
get () {
console.log('total被读取了')
return this.goods.reduce((total, item) => {
return total + item.price * item.count
}, 0)
},
set (val) {
console.log('被修改了', val)
}
}
}
}
简化写法
函数写法，简化写法只需要关心计算逻辑，也就是get方法，然后将计算结果return即可。
export default {
data () {
return {
goods: [
{
id: 1,
name: '苹果',
price: 2,
count: 0
},
{
id: 2,
name: '菠萝',
price: 6,
count: 0
}
]
}
},
computed: {
total () {
return this.goods.reduce((total, item) => {
return total + item.price * item.count
}, 0)
}
},
}缓存机制
缓存机制是computed的一个闪光点，这个缓存机制节省了大量的计算，从而提升了整体性能。如下所示，有总价1、总价2、总价3共3个读取的地方。初始化时只读取1次，修改依赖时也仅被读取1次。如果读取3次，有2次是浪费的。随着数据量和逻辑复杂度的提升，这种性能问题会越来越明显，所以这个缓存机制我认为是很伟大的设计。
正因为有缓存机制，那么计算属性对数据的实时性以及异步逻辑就显得不那么友好了。正如计算属性的原理，他会去收集所有的响应式依赖，如果在computed中获取时间戳、请求接口、创建定时器，那么计算属性收集到的并不是响应式依赖，所以不会再次执行计算逻辑，因此上述情况使用计算属性可能带来难以预料的结果。
computed与methods
计算属性与方法的区别：
- 计算属性有缓存，没有修改依赖则不会变化；方法没有缓存，每次调用会重新执行。（因此不需要缓存的情况可以使用methods）
- 计算属性会收集其响应式依赖；方法则直接过程式执行。
- 计算属性与data类似，直接读取；方法需要以触发、事件的方式去调用。
- 计算属性不建议耦合异步、实时性逻辑；方法可以做任意逻辑。
- 计算属性本质是可读写的数据；方法本质是一系列逻辑性操作。
总结
综上，计算属性是一种十分巧妙的设计，可以将非常冗杂的计算逻辑抽离，对代码的可维护性与可扩展性提供了保障。响应式数据的计算性能方面更加显著，结合缓存机制避免大量的、重复的、多余的计算。用好computed计算属性，代码风格也会更加优雅，可读性也会大大提高。
感谢各位读者的观看，有什么意见或建议欢迎评论或私信。
