计算属性 Computed
所以，对于任何复杂逻辑运算，你都应当使用计算属性 Computed。简单理解就是 Computed 在原来的 data 数据中基础上做了一些处理，处理完后用了一个新的变量进行存储，做的这些处理是不会影响原来的数据值的。并且 Computed 和选项 data 一样，使用的场景非常广泛，凡是能用 this 访问 Vue 实例的地方，都可以访问到 Computed 的数据。
<template>
<div class="home">
<div>{{ _price }}</div>
</div>
</template>
<script>
export default {
data() {
return {
price: 100.85
}
},
computed: {
_price() {
return Math.round(this.price)
}
}
}
</script>不能被修改
因为 Computed 本身可能是基于选项 data 中的数据进行加工处理，可以理解它没有真身，所以无法给它赋值。我们平时在 Computed 编写的代码其实就是 getter 访问器，因为默认就是 getter，没有 setter。如果想要给 Computed 变量赋值，那么就需要给它设置 setter，代表赋值后要做什么事情？接下来进行实践一下。
<template>
<div class="home">
<div>{{ _price }}</div>
</div>
</template>
<script>
export default {
data() {
return {
price: 100.85
}
},
computed: {
_price: {
get() {
return Math.round(this.price)
},
set(value) {
this.price = value
}
}
},
mounted() {
setTimeout(() => {
this._price = 102.85
}, 1000)
}
}
</script>代码中实现了 Computed 的 getter 、setter 写法。页面 dom 渲染完毕 1 秒后，会对 Computed 中的 _price 进行赋值，随即就会触发 setter 函数时，会对 选项 data 的值 this.price 进行修改。最后因为响应式的原理，Computed 的 _price 依赖了 this.price，所以 this.price 更新时，_price 的 getter 会重新进行计算。所以页面会显示出来 103。
