当有一个变量需要通过其他变量之间计算得来的时候，我们可以使用vue的计算属性，达到这一效果并不是一定需要计算属性，定义一个methods方法也同样可以达到效果，他们之间有什么区别？
计算属性存在缓存，计算属性会把函数执行一次，把结果存起来，依赖的值改变，会重新赋值。但是方法每调用一次，就会执行一次，不存在缓存
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<p>函数</p>
{{add()}}
{{add()}}
{{add()}}
<p>计算属性</p>
{{addnum}}
{{addnum}}
{{addnum}}
</div>
<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
const vm = new Vue({
el: '#app',
data() {
return {
a1 : 2,
a2: 3,
num: ''
}
},
methods: {
add(){
console.log("函数被执行了");
return this.a1 + this.a2
}
},
computed:{
addnum(){
console.log("计算属性执行了");
return this.a1 + this.a2
}
}
})
</script>
</body>
</html>
结果就是：
Snipaste_2021-05-18_18-50-38.png
- 从页面中可以看出，两者最终呈现的效果是一样的
- 从控制台中可以看出，函数执行了三次，而计算属性执行了一次，在性能方面，计算属性优于方法
总结：当两者所依赖的计算项不发生改变时，计算属性只执行一次。将计算出来的值存入缓存，多次访问该值会直接从缓存取，计算属性是基于他们的响应式依赖而进行缓存的。而函数是调用一次就会执行一次。当所依赖项发生改变时，两者都会重新执行
注意：计算属性不能存在异步方法，如
...
computed: {
asyncFullName(){
let a = ''
setTimeout(() => {
a='heihei'
})
return a
},
}
...
在计算属性中添加一个定时器，定时器和return语句是同时执行的，当return执行完毕了，定时器都还没有执行，所以就不行了
网友评论