Hallo teman teman kembali lagi di artikel bertema vue js yaitu kita akan membahas tenantang Belajar Tentang Computed Properties Pada Vue JS.
Sekilas computed properties dan methods hampir serupa dan bahkan mirip, lalu apakah perbedaan keduanya? Jika code diatas kita masukkan kedalam methods, maka hasil yang akan kita peroleh akan sama. Namun, bedanya adalah computed properti di-cache berdasarkan dependecies mereka, sehingga computed properties hanya akan menjalankan kembali fungsinya apabila beberapa dependencies (nilai yang dibutuhkan) terjadi perubahan. Itu berarti selama nilai dari variable A, B dan Operator tidak mengalami perubahan maka function operasinya tidak akan dijalankan kembali. Sedangkan methods, setiap kali ada permintaan maka akan menjalankan kembali fungsinya.
Lalu mengapa kita perlu menggunakan computed properties? Hal ini hanyalah masalah pilihan dan tergantung kebutuhan, dimana data yang perubahannya tidak sesering mungkin dan apalagi digunakan berkali-kali sebaiknya disimpan di computed properties, sedangkan methods berlaku sebaliknya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fvue%2Fdist%2Fvue.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<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>A - {{ a }}</p>
<p>B - {{ b }}</p>
<p>Age + A = {{ addToA }}</p>
<p>Age + B {{ addToB }}</p>
</div>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22app.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
dan ini untuk javascript nya :
const vue = new Vue({
el: '#vue-app',
data: {
age: 20,
a:0,
b:0
},
methods: {
addToA: function(){
console.log('add to a')
return this.age + this.a
},
addToB: function(){
console.log('add to b')
return this.age + this.b
}
},
computed: {
addToA: function(){
console.log('add to a');
return this.age + this.a
},
addToB: function(){
console.log('add to b');
return this.age + this.b
}
}
});
Oke seperti itu lah teman-teman untuk Belajar Tentang Computed Properties Pada Vue JS dan sampai bertemu lagi pada artikel selanjutnya.
The post Belajar Tentang Computed Properties Pada Vue JS appeared first on Kursus Website Terbaik.