关注性能小课，成长不止一点点
1、定义
使用vue做前端开发，在模板中可以直接通过插值语法显示data中的数据，但某些f复杂情况下，我们可能需要对数据进行一些转化后再显示、或者需要将多个数据结合起来进行显示：
-
比如我们有firstName和lastName两个变量，我们需要显示完整的形成 -
但是如果多个地方都需要显示完整的名称，我们就需要写多个 {{firstName}}{{lastName}}
所以在遇到复杂逻辑时应该使用计算属性。计算属性都是以函数的形式写在vue示例内的 computed选项内，最终返回计算后的结果。
可以理解为在vue中computed就是计算属性，主要作用是把数据存储到内存中，减少不必要的请求，还可以利用computed给子组件的data赋值。
2、一个简单计算属性
示例：
<template>
<div class="CalculationProperties">
<span>商品数量：{{count}} 个</span>
<el-input v-model="count" placeholder="请输入内容"></el-input>
<span>商品单价：{{unitPrice}} 元</span>
<el-input v-model="unitPrice" placeholder="请输入内容"></el-input>
<h1>方法一、通过方法计算</h1>
<h1>商品总价：{{totalPrice()}} 元</h1>
<h1>方法二、简单计算属性</h1>
<h1>商品总价：{{totalPriceOne}} 元</h1>
</div>
</template>
<script>
export default {
name: 'calculationProperties',
data () {
return {
msg: '计算属性',
count: 10,
unitPrice: 24
}
},
methods: {
totalPrice () {
return this.count * this.unitPrice
}
},
computed: {
totalPriceOne () {
return this.count * this.unitPrice
}
}
}
</script>
我们定义了一个计算属性 totalPriceOne，它的返回值是商品的单价和数量相乘得到的总价，在 html 模板中，我们直接用插值表达式 {{ totalPrice }} 来获得商品的总价，然后渲染到页面上。
计算属性的值会根据其函数内部依赖的变化而重新计算。也就是说，在上面的例子中当 count 和 unitPrice 有任意一方发生改变时 totalPrice 都会随之更新。
3、Getter 和 Setter
每一个计算属性都包含一个 getter 和一个 setter，我们上面的两个示例都是计算属性的默认用法，只是利用了 getter 来读取。在你需要时，也可以提供一个 setter函数 ， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发 setter函数，执行一些自定义的操作。
4、计算属性 VS 方法区别
如果不使用计算属性，在 methods 里定义了一个方法，也可以实现相同的效果，甚至该方法还可以接受参数，使用起来更灵活。
既然 methods 同样可以解决模板中复杂逻辑计算的问题，那么为什么还需要使用计算属性呢? 原因就是：计算属性是基于它的依赖缓存的。前面我们介绍过，计算属性的改变取决于其所依赖数据的变化，所以只要依赖数据不发生改变，计算属性就不会更新。当我们重复获取计算属性时它也不会重复计算，只会获取缓存的值。而我们每次调用 methods 都会重新计算一遍，这样将会消耗一部分性能。当然，如何你不希望对数据进行缓存，那么可以用方法来代替。
5、总结
-
通过计算属性 computed 来代替在模板编写复杂逻辑的使用方法。 -
如何利用 setter 和 getter 来编写一个复杂的计算属性。 -
对比了计算属性和方法的区别：计算属性是有缓存的而方法每次都会重新执行。
END
免费技术支持微信：15712862196
咨询QQ：2657535456
咨询微信号：huice666
慧测公众号
