J'ai lu le document officiel qui dit :
computed
和methods
的區(qū)別是,computed
會基于它們的依賴進行緩存,如果數(shù)據(jù)沒法改變則computed
刷新時不會重新執(zhí)行,而methods
sera exécuté à chaque fois.
Mais l'exemple que j'ai écrit n'est pas comme ?a (l'exemple que j'ai écrit est un exemple officiel).
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();
}
}
});
Discutons?: ai-je écrit quelque chose de mal quelque part??
Votre exemple n'est pas utile pour décrire la différence entre les deux. Montrez-vous cet exemple?: JSFiddle
<p id="app">
<!-- 每次點擊時,顯示的時間都不同 -->
<button @click="showMethod">methodsNow</button>
<!-- 每次點擊時,顯示的時間都相同 -->
<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();
}
}
})
Vous comprendrez après l'avoir testé ainsi
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
}
}
});
En conséquence, vous constatez que ComputedNow est exécuté une fois et MethodsNow est exécuté deux fois