-
computed(计算属性) vs methods
计算属性与方法的对比
两者可以相互替代，最终结果都是一样的，不同的是计算属性基于它的依赖缓存，计算属性只有它的依赖发生改变时才会从新取值，即时num不放生改变，即直接取值，多次访问则直接从缓存取值，不会重新计算。相比之下methods在每次重新渲染时，总会重新执行函数
//js
var vm2 = new Vue({
el:'#exa2',
data:{
num:3
},
//方法
methods:{
m_counter:function(){
//多次渲染会重新执行
return this.num+1;
}
},
//计算属性
computed:{
c_counter:function(){
//多次渲染是否重新执行取决于num值是否改变
return this.num+1;
}
}
});
//html
<!-- vue示例2 -->
<div id="exa2">
<span>{{m_counter()}}</span>
<span>{{c_counter}}</span>
</div>
-
computed(计算属性) vs watch
vue.js 提供了一个方法 $watch ，它用于观察 Vue 实例上的数据变动。当一些数据需要根据其它数据变化时， $watch 很诱人。但通常计算属性是更好的选择。那什么时候用watch呢，答案是当你想要在数据变化响应时，执行异步操作或昂贵操作时这很有用
//js
var vm2 = new Vue({
el:'#exa2',
data:{
num:3,
ret:0
},
watch:{
//此函数是被动的，当num发生改变时此才会函数执行,也就是说默认ret的值为0，
num:function(val){
this.ret= val + ' watch';
}
},
computed:{
//主动执行 需要在页面显示调用
c_ret:function(){
return this.num +' watch';
}
}
});
//html
<!-- vue示例2 -->
<div id="exa2">
<input v-model='num'>
<-- 初次为ret为0 -->
watch:<span>{{ret}}</span></br>
<-- 初次为ret为‘3 watch’ -->
cumputed:<span>{{c_ret}}</span>
</div>
