Ketika @gleenk meminta contoh praktis untuk membuat perbedaan cache dan ketergantungan antara metode dan properti yang dihitung, saya akan menunjukkan skenario sederhana:
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;
}
}
});
Di sini kita memiliki 2 metode dan 2 properti yang dikomputasi yang melakukan tugas yang sama. Metode addToAmethod& addToBmethoddan properti yang dihitung addToAcomputed& addToBcomputedsemua menambahkan +20 (yaitu agenilai) ke salah satu aatau b. Mengenai metode, keduanya disebut setiap kali tindakan telah dilakukan pada salah satu properti yang terdaftar, bahkan jika dependensi untuk satu metode tertentu tidak berubah. Untuk properti yang dihitung, kode dieksekusi hanya ketika dependensi telah berubah; misalnya, salah satu nilai properti spesifik yang merujuk ke A atau B akan memicu addToAcomputedatau addToBcomputed, masing-masing.
Metode dan deskripsi yang dikomputasi tampak sangat mirip, tetapi karena @Abdullah Khan telah menentukannya , mereka bukan hal yang sama ! Sekarang mari kita coba menambahkan beberapa html untuk mengeksekusi semuanya bersama dan melihat di mana perbedaannya.
Demo kasus Metode
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>
Hasil yang dijelaskan
Ketika saya mengklik tombol "Tambah ke A" , semua metode dipanggil (lihat hasil layar log konsol di atas), addToBmethod()ini juga dieksekusi tetapi saya tidak menekan tombol "Tambahkan ke B" ; nilai properti yang merujuk ke B tidak berubah. Perilaku yang sama terjadi jika kita memutuskan untuk mengklik tombol "Tambahkan ke B" , karena sekali lagi kedua metode akan dipanggil secara independen dari perubahan ketergantungan. Menurut skenario ini, ini adalah praktik buruk karena kami menjalankan metode setiap waktu, bahkan ketika dependensi tidak berubah. Ini benar-benar menghabiskan sumber daya karena tidak ada cache untuk nilai properti yang belum berubah.
Demo kasus properti yang dihitung
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>
Hasil yang dijelaskan
Ketika saya mengklik tombol "Add to A" , hanya properti yang dikomputasi addToAcomputeddipanggil karena, seperti yang sudah kami katakan, properti yang dikomputasi dieksekusi hanya ketika dependensi telah berubah. Dan karena saya tidak menekan tombol "Tambahkan ke B" dan nilai properti usia untuk B tidak berubah, tidak ada alasan untuk memanggil dan menjalankan properti yang dihitung addToBcomputed. Jadi, dalam arti tertentu, properti yang dikomputasi mempertahankan nilai "sama tidak berubah" untuk properti B seperti semacam cache. Dan dalam keadaan ini ini dianggap praktik yang baik .
