Vue中computed和methods的区别
computed和methods的区别:
- computed是属性调用,而methods是函数调用
- computed带有缓存功能,而methods不是
- 换句话说,computed只有在绑定的属性值变化的时候才会调用,而methods,在绑定的属性值变化的时候,所有调用的该方法的地方都会重新调用这个方法
例子
<div id="app8">
<p>
{{message8}}
</p>
<p>
{{computeMsg}}
</p>
<p>
{{computeMsg}}
</p>
<p>
{{computeMsgMethod()}}
</p>
<p>
{{computeMsgMethod()}}
</p>
<input v-model="message8" type="text" />
</div>
var app8 = new Vue({
el: '#app8',
data: {
message8: "origin data"
},
computed: {
computeMsg: function(){
console.log('计算属性, 依赖于缓存, 只有message8发生变化才会再次执行')
return this.message8+ 'from computed';
}
},
methods: {
computeMsgMethod: function(){
console.log('方法名字, 调用一次执行一次');
return this.message8+'from methods';
}
}
});
当页面第一刷新的时候:
计算属性, 依赖于缓存, 只有message8发生变化才会再次执行
方法名字, 调用一次执行一次
方法名字, 调用一次执行一次
当input
输入框变动时:
计算属性, 依赖于缓存, 只有message8发生变化才会再次执行
方法名字, 调用一次执行一次
方法名字, 调用一次执行一次
可以发现,computed虽然在两处被调用,但只有在绑定属性变动的时候才重新计算,而methods则只要被调用了多少次,又会被重新调用多少次