我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而,不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。
<div id="nav">
<h1>{{msg}}</h1>
<p class="test1">{{mTime()}}</p>
<p class="test2-1">{{mTime()}}</p>
<p class="test2-2">{{mTime()}}</p>
<p class="test2-3">{{mTime()}}</p>
<p class="test3-1">{{timeNow}}</p>
<p class="test3-2">{{timeNow}}</p>
<p @click="getCLick">点击我</p>
</div>
var nav = new Vue({
el:'#nav',
data:{
msg:'我是测试数据。。。'
},
computed: {
timeNow(){
console.log('%ctime。。。', 'color: green;')
return this.msg+'computed'
}
},
methods:{
mTime(){
console.log('%ctime。。。', 'color: red;')
return this.msg+'methods'
},
getCLick(){
this.msg='我变了'
console.log('触发点击')
}
},
});
如图,methods会执行四次,而计算属性只执行一次。当点击改变msg的值时,同样的结果,methods执行四次,计算属性执行一次。