计算属性
对于任何复杂逻辑,都应当使用计算属性
经过一系列计算后得到的属性值,这个值可以被模板结构或methods方法使用
- 计算属性定义到computed节点下
- 计算属性在定义的时候,要定义成方法格式
- 计算属性必须有返回值
- 计算属性必须当作普通属性使用
本例中主要使用``对字符串拼接,内部引用数据格式为${}
computed节点下,定义用的是方法,使用时是属性
<div id="app">
R:<input type="text" v-model="r">
G:<input type="text" v-model="g">
B:<input type="text" v-model="b">
<div class="box" :style="{background:rgb}">
{{rgb}}
</div>
</div>
<script src="./lib/vue-2.6.12.js"></script>
<script>
const vm = new Vue({
el: '#app',
data: {
r: 0,
g: 0,
b: 0
},
computed: {
//rgb作为一个计算属性,被定义成了方法格式
//最终在这个方法中要返回
rgb() {
return `rgb(${this.r},${this.g},${this.b})`
}
}
})
</script>
好处:实现代码复用,只要计算属性中依赖的data变了,计算属性会自动求值
上面的用法使用了计算属性中的getter
接下来讲解一下setter
// 计算属性默认是这样使用的
// 但如果我们还想在rgb修改的情况下,反过来获取r,g,b
// 就需要用到setter
computed: {
//rgb作为一个计算属性,被定义成了方法格式
//最终在这个方法中要返回
rgb: {
get(){
return `rgb(${this.r},${this.g},${this.b})`s
},
set(newVal){
// newVal即为新的rgb
}
}
}
计算属性和方法的区别
- 计算属性会缓存计算的结果,只有计算属性的依赖项发生变化时(r,b,g),才会重新计算,性能更好;而函数每次都会执行
- 也要注意一点,如果计算属性中没有响应式依赖,则计算属性将不会再更新,且计算属性的更新是判断地址改变,而不是值改变
// 例如
computed: {
now: function () {
return '123'
}
}
// '123'不是响应式,所以不会再更新
所以:如果想要缓存数据,就使用计算属性;不想缓存就是使用函数
// 函数的使用方法
<div>{{no()}}</div>
methods: {
no(){
return Date.now()
}
},
计算属性和watch的区别
- 缓存
- 计算属性不能调用异步,因为计算属性需要return返回值,但是异步中不能return;watch则没有问题
为什么异步不能return