我看官方文檔上說：
computed和methods的區(qū)別是，computed會基於它們的依賴進(jìn)行緩存，如果資料無法改變則computed刷新時不會重新執(zhí)行，而methods則會每次執(zhí)行。
but我寫的例子並不是這樣(寫的是官方的例子)。
html：
<p id="app">
<p>{{methodsNow()}}</p>
<p>{{computedNow}}</p>
</p>javascript：
new Vue({
el:'#app',
data:{
},
methods:{
methodsNow:function(){
return new Date().toLocaleString();
}
},
computed:{
computedNow:function(){
return new Date().toLocaleString();
}
}
});大家來探討一下，我是不是哪裡寫錯了？
2
0
0
你的例子對於描述二者不同這點(diǎn)上，沒有幫助。給你看這個例子：JSFiddle
<p id="app">
<!-- 每次點(diǎn)擊時，顯示的時間都不同 -->
<button @click="showMethod">methodsNow</button>
<!-- 每次點(diǎn)擊時，顯示的時間都相同 -->
<button @click="showComputed">computedNow</button>
</p>new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods:{
methodsNow: function(){
return new Date().toLocaleString();
},
showMethod: function() {
alert(this.methodsNow());
},
showComputed: function() {
alert(this.computedNow);
}
},
computed:{
computedNow: function(){
return new Date().toLocaleString();
}
}
})
你這樣測試下就明白了
html：
<p id="app">
<p>{{methodsNow()}}</p>
<p>{{computedNow}}</p>
<p>{{methodsNow()}}</p>
<p>{{computedNow}}</p>
</p>
javascript：
new Vue({
el:'#app',
data () {
return {
mData: 1,
cData: 2
}
},
methods: {
methodsNow: function () {
console.log('methods')
return this.mData
}
},
computed: {
computedNow: function () {
console.log('computed')
return this.cData
}
}
});
結(jié)果你發(fā)現(xiàn)computedNow執(zhí)行了一次，methodsNow執(zhí)行了兩次
