先瞅一眼代码吧
一个简单的小demo,划水之余写的,可能有点粗心,有不对的地方请指正
<template>
<div id="app">
<div> {{ aaa }} </div> <!-- 3 -->
<div> {{ bbb() }} </div> <!-- 3 -->
</div>
</template>
new Vue({
el: '#app',
data: {
a:1,
b:2,
},
computed: {
aaa: function () {
return this.a + this.b
}
},
methods:{
bbb: function () {
return this.a + this.b
}
}
})
aaa() 和 bbb() 都是为了计算 a+b 的结果是多少,得出来的值也是一样的,那他们的区别在哪呢?
computed 计算属性是基于他们的响应式依赖进行缓存的,只在相关响应式依赖发生改变时它们才会重新求值。 // 官网原话,
简单来说,就是a 和 b,只有data中的 a和b发生了变化,他的响应式依赖发生了变化, aaa函数才会再次执行。如果数据a b没有发生改变,多次访问aaa 会立即返回之前的计算结果,而不需要在执行一次函数。
aaa是计算属性,计算属性调用的时候可以不用带括号 {{ aaa }}
methods 方法,每当触发重新渲染时,bbb() 将总会再次执行,
bbb是方法,必须带括号 {{ bbb() }}