Ponieważ @gleenk poprosił o praktyczny przykład pokazujący różnice w pamięci podręcznej i zależnościach między metodami i obliczonymi właściwościami, pokażę prosty scenariusz:
app.js
new Vue({
el: '#vue-app',
data: {
a: 0,
b: 0,
age: 20
},
methods: {
addToAmethod: function(){
console.log('addToAmethod');
return this.a + this.age;
},
addToBmethod: function(){
console.log('addToBmethod');
return this.b + this.age;
}
},
computed: {
addToAcomputed: function(){
console.log('addToAcomputed');
return this.a + this.age;
},
addToBcomputed: function(){
console.log('addToBcomputed');
return this.b + this.age;
}
}
});
Tutaj mamy 2 metody i 2 obliczone właściwości, które wykonują to samo zadanie. Metody addToAmethodi addToBmethodoraz obliczone właściwości addToAcomputedi addToBcomputedwszystkie add +20 (czyli agewartość) albo aalbo b. W odniesieniu do metod, są one zarówno nazywany każdym razem, gdy czynność została wykonana na dowolny z wymienionych właściwości, nawet jeśli Zależności dla konkretnej metodzie jeden nie uległy zmianie. W przypadku obliczonych właściwości kod jest wykonywany tylko wtedy, gdy zmieniła się zależność; na przykład jedna z określonych wartości właściwości, które odnoszą się do A lub B, wyzwoli odpowiednio addToAcomputedlub addToBcomputed.
Metoda i obliczone opisy wydają się dość podobne, ale ponieważ @Abdullah Khan już je określił , nie są tym samym ! Teraz spróbujmy dodać trochę kodu HTML, aby wykonać wszystko razem i zobaczyć, gdzie jest różnica.
Demo przypadku metody
new Vue({
el: '#vue-app',
data: {
a: 0,
b: 0,
age: 20
},
methods: {
addToAmethod: function(){
console.log('addToAmethod');
return this.a + this.age;
},
addToBmethod: function(){
console.log('addToBmethod');
return this.b + this.age;
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS Methods - stackoverflow</title>
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
</head>
<body>
<div id="vue-app">
<h1>Methods</h1>
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>Age + A = {{ addToAmethod() }}</p>
<p>Age + B = {{ addToBmethod() }}</p>
</div>
</body>
<script src="app.js"></script>
</html>
Wyjaśniony wynik
Kiedy klikam przycisk „Dodaj do A” , wywoływane są wszystkie metody (zobacz powyższy wynik na ekranie dziennika konsoli), addToBmethod()jest również wykonywany, ale nie nacisnąłem przycisku „Dodaj do B” ; wartość właściwości odnosząca się do B nie uległa zmianie. To samo zachowanie pojawia się, gdy zdecydujemy się kliknąć przycisk „Dodaj do B” , ponieważ ponownie obie metody zostaną wywołane niezależnie od zmian zależności. Zgodnie z tym scenariuszem jest to zła praktyka, ponieważ za każdym razem wykonujemy te metody, nawet jeśli zależności nie uległy zmianie. To naprawdę pochłania zasoby, ponieważ nie ma pamięci podręcznej dla wartości właściwości, które nie uległy zmianie.
Prezentacja przypadku właściwości obliczonej
new Vue({
el: '#vue-app',
data: {
a: 0,
b: 0,
age: 20
},
computed: {
addToAcomputed: function(){
console.log('addToAcomputed');
return this.a + this.age;
},
addToBcomputed: function(){
console.log('addToBcomputed');
return this.b + this.age;
}
}
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS Computed properties - stackoverflow</title>
<link href="style.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
</head>
<body>
<div id="vue-app">
<h1>Computed Properties</h1>
<button v-on:click="a++">Add to A</button>
<button v-on:click="b++">Add to B</button>
<p>Age + A = {{ addToAcomputed }}</p>
<p>Age + B = {{ addToBcomputed }}</p>
</div>
</body>
<script src="app.js"></script>
</html>
Wyjaśniony wynik
Kiedy klikam przycisk „Dodaj do A” , addToAcomputedwywoływana jest tylko obliczona właściwość, ponieważ, jak już powiedzieliśmy, obliczone właściwości są wykonywane tylko wtedy, gdy zmieniła się zależność. A ponieważ nie nacisnąłem przycisku „Dodaj do B” i wartość właściwości wieku dla B nie uległa zmianie, nie ma powodu, aby wywoływać i wykonywać obliczoną właściwość addToBcomputed. Zatem, w pewnym sensie, obliczona właściwość zachowuje „tę samą niezmienioną” wartość właściwości B jak rodzaj pamięci podręcznej. W tej sytuacji należy to uznać za dobrą praktykę .
