Metoda a obliczona w Vue
Jaka jest główna różnica między metodą a obliczoną wartością w Vue.js?
Wyglądają tak samo i wymiennie.
4 answers
Obliczone wartości i metody są bardzo różne w Vue i zdecydowanie nie są wymienne w większości przypadków.
Computed Property
Bardziej odpowiednią nazwą dla obliczonej wartości jest obliczona właściwość. W rzeczywistości, gdy Vue jest instancją, obliczone właściwości są konwertowane do właściwości Vue za pomocą gettera, a czasami settera. Zasadniczo można myśleć o obliczonej wartości jako wartości pochodnej, która będzie automatycznie aktualizowana, gdy jeden z wartości bazowe użyte do jego obliczenia są aktualizowane. Nie wywołujesz a i nie akceptuje żadnych parametrów. Odwołujesz się do właściwości obliczeniowej, tak jak do właściwości danych. Oto klasyczny przykład z dokumentacji :
computed: {
// a computed getter
reversedMessage: function () {
// `this` points to the vm instance
return this.message.split('').reverse().join('')
}
}
, do którego odnosi się w DOM tak:
<p>Computed reversed message: "{{ reversedMessage }}"</p>
Obliczone wartości są bardzo cenne dla manipulowania danymi, które istnieją na Twoim Vue. Za każdym razem, gdy chcesz filtrować lub przekształcać dane, zazwyczaj używasz obliczoną w tym celu wartość.
data:{
names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
startsWithB(){
return this.names.filter(n => n.startsWith("B"))
}
}
<p v-for="name in startsWithB">{{name}}</p>
Obliczone wartości są również buforowane, aby uniknąć powtarzalnego obliczania wartości, która nie musi być ponownie obliczana, gdy nie uległa zmianie (ponieważ może nie być na przykład w pętli).
Metoda
Metoda jest tylko funkcją związaną z instancją Vue. Zostanie ona oceniona tylko po jawnym wywołaniu. Podobnie jak wszystkie funkcje javascript, akceptuje on parametry i będzie ponownie oceniany za każdym razem, gdy zostanie wywołany. Metody są przydatne w tych samych sytuacjach każda funkcja jest użyteczna.
data:{
names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
startsWithB(){
return this.startsWithChar("B")
},
startsWithM(){
return this.startsWithChar("M")
}
},
methods:{
startsWithChar(whichChar){
return this.names.filter(n => n.startsWith(whichCharacter))
}
}
Dokumentacja Vue jest naprawdę dobra i łatwo dostępna. Polecam.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-04 05:35:25
Jak @gleenk poprosił o praktyczny przykład, aby uwidocznić różnice w buforze 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 właściwości obliczeniowe, które wykonują to samo zadanie. Metody addToAmethod & addToBmethod i obliczone właściwości addToAcomputed & addToBcomputed Wszystkie dodają +20 (tj. wartość age) do a lub b. Jeśli chodzi o metody, są one zarówno nazywa się co czas na dowolnej z wymienionych właściwości została wykonana akcja, nawet jeśli zależności jednej konkretnej metody nie uległy zmianie. Dla właściwości obliczeniowych kod jest wykonywany tylko wtedy, gdy zależność się zmieniła; na przykład jedna z określonych wartości właściwości, która odnosi się do A lub B, uruchomi odpowiednio addToAcomputed lub addToBcomputed.
Metoda i opisy obliczeniowe wydają się dość podobne, ale jak już to określił @ Abdullah Khan, nie są takie same rzecz ! Teraz spróbujmy dodać trochę html, aby wykonać wszystko razem i zobaczyć, gdzie jest różnica:
Indeks.html (dla metody)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS stackoverflow example</title>
<link href="style.css" rel="stylesheet" />
<script src="https://unpkg.com/vue"></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 = {{ addToAmethod() }}</p>
<p>Age + B = {{ addToBmethod() }}</p>
</div>
</body>
<script src="app.js"></script>
</html>
Wynik
Kiedy klikam na przycisk "Dodaj do A" , wszystkie metody są wywoływane (patrz wynik ekranu dziennika konsoli powyżej), addToBmethod() jest również wykonywany, ale nie nacisnąłem "Dodaj do B"; wartość właściwości, która odnosi się do B nie zmieniła się. To samo zachowanie przychodzi, jeśli decydujemy się kliknąć na przycisk "Dodaj do B" , ponieważ ponownie obie metody będą wywoływane niezależnie od zmian zależności. Zgodnie z tym scenariuszem jest to zła praktyka, ponieważ wykonujemy metody za każdym razem, nawet jeśli zależności się nie zmieniły. Jest to naprawdę zużywające zasoby, ponieważ nie ma pamięci podręcznej dla wartości właściwości, które nie uległy zmianie.
Indeks.html (for computed property)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>VueJS stackoverflow example</title>
<link href="style.css" rel="stylesheet" />
<script src="https://unpkg.com/vue"></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>
The wynik
Kiedy klikam na przycisk "Dodaj do" , tylko obliczona właściwość addToAcomputed jest wywoływana, ponieważ, jak już powiedzieliśmy, obliczone właściwości są wykonywane tylko wtedy, gdy zależność się zmieniła. A ponieważ nie nacisnąłem przycisku "Dodaj do B" i wartość właściwości age Dla B nie zmieniła się, nie ma powodu, aby wywoływać i wykonywać obliczoną właściwość addToBcomputed. Tak więc w pewnym sensie obliczona właściwość zachowuje "tę samą niezmienioną" wartość dla B właściwość jak rodzaj pamięci podręcznej. I w tej sytuacji jest to rozważenie dobrej praktyki.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-17 17:17:14
Z docs
..właściwości obliczeniowe są buforowane na podstawie ich zależności. Obliczona właściwość będzie ponownie oceniana tylko wtedy, gdy niektóre z jej zależności ulegną zmianie.
Jeśli chcesz, aby dane były buforowane, użyj właściwości obliczeniowych z drugiej strony jeśli nie chcesz, aby dane były buforowane, użyj właściwości prostych metod.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-04 13:21:53
Właściwości Obliczeniowe
Właściwości obliczeniowe nazywane są również wartością obliczeniową. Oznacza to, że aktualizują się i mogą być zmieniane w każdej chwili. Ponadto buforuje dane, dopóki się nie zmieni. Gdy Vue jest tworzona instancja, obliczone właściwości są konwertowane na właściwość.
Jeszcze jedna rzecz, którą chcę udostępnić, nie można przekazać żadnego parametru w obliczonych właściwościach, dlatego podczas wywoływania dowolnej właściwości komputera nie jest wymagany nawias.
Metody
Metody są takie same jak funkcja i działają w ten sam sposób. Poza tym, metoda nic nie robi, chyba że ją nazwiesz. Ponadto, podobnie jak wszystkie funkcje javascript, akceptuje parametry i będzie ponownie oceniany za każdym razem, gdy zostanie wywołany. Następnie nie mogą buforować wartości
W metodzie wywołującej nawias jest i można w nim wysłać jeden lub więcej parametrów.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-07-11 11:07:14