Heim > Fragen und Antworten > Hauptteil
Ich habe gelesen, dass im offiziellen Dokument steht:
computed
和methods
的区别是,computed
会基于它们的依赖进行缓存,如果数据没法改变则computed
刷新时不会重新执行,而methods
wird jedes Mal ausgeführt.
Aber das Beispiel, das ich geschrieben habe, ist nicht so (das Beispiel, das ich geschrieben habe, ist ein offizielles Beispiel).
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();
}
}
});
Lass uns besprechen, habe ich irgendwo etwas falsch geschrieben?
三叔2017-06-12 09:33:36
你的例子对于描述二者不同这点上,没有帮助。给你看这个例子: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();
}
}
})
扔个三星炸死你2017-06-12 09:33:36
你这样测试下就明白了
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
}
}
});
结果你发现computedNow执行了一次,methodsNow执行了两次