04. 计算属性
于2022-10-10 16:46:25发布
48
在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如:
<template>
<div>
{{ name.split('').reverse().join('') }}
</div>
</template>
<script>
export default {
data(){
return {
name : 'tom'
}
}
}
</script>
在这种情况下,模板不再简单和清晰。为了解决这种情况,vue推荐使用计算属性
例子:
<template>
<div>
{{ reversedMessage }}
</div>
</template>
<script>
export default {
computed:{
reversedMessage(){
return this.name.split('').reverse().join('')
}
},
data(){
return {
name : 'tom'
}
}
}
</script>
你可能已经注意到我们可以通过调用表达式中的method来达到同样的效果:
<template>
<div>
{{ reversedMessage() }}
</div>
</template>
<script>
export default {
data(){
return {
name : 'tom'
}
},
methods:{
reversedMessage(){
return this.name.split('').reverse().join('')
}
}
}
</script>
不经过计算属性,我们可以在 method 中定义一个相同的函数来替代它。对于最终的结果,两种方式确实是相同的。然而,不同的是计算属性是基于它的依赖缓存。计算属性只有在它的相关依赖发生改变时才会重新取值。这就意味着只要 name的值没有发生改变,多次访问 reversedMessage 计算属性会立即返回之前的计算结果,而不必再次执行函数。比如下面的例子 :
<template></template>
<script>
export default {
methods:{
getResult(){
console.log('开始 :' + Date.now());
let a = 0;
for(let i=0; i<1000000; i++){
a = Math.cos(a + i * 95 / 2);
}
console.log('结束 :' + Date.now());
return a;
}
},
created(){
console.log(this.getResult());
setTimeout(()=>{
console.log(this.getResult());
},2000);
}
}
</script>
getResult的内部执行了挺复杂的计算,而且循环一百万次。通过log打印出两次的时间戳,大概得出,计算出a的值需要花费200毫秒左右。
然后改成用计算属性试试
<template></template>
<script>
export default {
computed:{
getResult(){
console.log('开始 :' + Date.now());
let a = 0;
for(let i=0; i<1000000; i++){
a = Math.cos(a + i * 95 / 2);
}
console.log('结束 :' + Date.now());
return a;
}
},
created(){
console.log(this.getResult);
setTimeout(()=>{
console.log(this.getResult);
},2000);
}
}
</script>
第一次也需要花费200毫秒左右才能得到a的值,但是第二次则马上能得到a的值。(注意,只打印了一次开始和结束,第二次的值并没有进入到getResult函数里面去执行,而是直接返回了缓存的数据 )
这就说明,第二次获取a的值并没有去真正的做运算,而是直接返回了a的缓存。