Latihan mempraktikkan perbedaan Computed dan Methods Property

Silakan mencoba mempraktikkan perbedaan Computed dan Methods Property:

1. Computed untuk filter daftar (cache-friendly)

Pada file html:

<!-- Template --

<input v-model="q" placeholder="cari...">

<li v-for="p in filtered" :key="p.id">{{ p.name }}</li>

Pada file js

// Options API

export default {

 data: () => ({ q: '', items: [{id:1,name:'Ari'},{id:2,name:'Bela'}] }),

 computed: {

 filtered() {

 const q = this.q.toLowerCase()

 return this.items.filter(i => i.name.toLowerCase().includes(q))

 }

 }

}

Computed filtered hanya re-evaluate saat q atau items berubah (bukan setiap render).

2. Method untuk fungsi berargumen

Pada file html:

<li v-for="p in items" :key="p.id">{{ highlight(p.name, q) }}</li>

Pada file js

methods: {

 highlight(text, q) {

 if (!q) return text

 const re = new RegExp(`(${q})`, 'ig')

 return text.replace(re, '[$1]')

 }

}

Di sini method masuk akal karena butuh argumen text & q

C. Composition API - Computed (Pembahasan yang Lebih Advance)

Sebelumnya kita menggunakan Vue.js Option API (versi 2). Namun, pada versi Vue.js 3, diperkenalkan Composition API

https://vueschool.io/articles/vuejs-tutorials/options-api-vs-composition-api/

Style yang kita pelajari lebih kepada Option API. Namun, ada perbedaan terbesar dalam penggunaan kedua jenis ini:

Options API:

Cocok untuk proyek yang lebih kecil dan kurang kompleks, atau saat memelihara basis kode Vue 2 yang lama.

Composition API:

Ideal untuk aplikasi yang lebih besar dan lebih kompleks yang memerlukan modularitas, penggunaan kembali, dan skalabilitas jangka panjang yang lebih baik.

Oleh itu, kita bahas sedikit mengenai style pada Composition API

ref adalah alat fundamental untuk mengelola data reaktif dan status turunan.

ref digunakan untuk membuat referensi reaktif ke nilai primitif (seperti string, angka, atau boolean) atau objek.

Ketika properti .value dari sebuah ref diubah, Vue secara otomatis mendeteksi perubahan tersebut dan memicu render ulang komponen yang bergantung padanya.

computed digunakan untuk membuat properti reaktif turunan yang secara otomatis diperbarui ketika dependensinya berubah.

Properti ini menggunakan fungsi getter sebagai argumen, yang menentukan bagaimana nilai computed dihitung berdasarkan data reaktif lainnya (termasuk ref).

Properti computed di-cache, artinya nilainya hanya dihitung ulang ketika dependensinya benar-benar berubah, sehingga efisien untuk perhitungan yang kompleks.

Secara default, properti computed bersifat getter-only (hanya-baca), tetapi dapat dibuat dapat ditulis dengan menyediakan fungsi get dan set.

Properti computed seringkali bergantung pada ref (atau data reaktif lainnya) untuk melakukan perhitungannya.

Nilai yang dikembalikan oleh computed() itu sendiri merupakan ref yang dihitung, artinya kita dapat mengakses nilainya menggunakan .value seperti ref biasa.

import { ref, computed } from 'vue'

const items = ref([{id:1,name:'Ari'},{id:2,name:'Bela'}])

const q = ref('')

const filtered = computed(() => {

const s = q.value.toLowerCase()

return items.value.filter(i => i.name.toLowerCase().includes(s))

})

Catatan untuk mengingat kembali:

Evaluasi computed terjadi bila:

(1) dipakai dalam template/komputasi lain, atau (2) ditonton (watcher) → men-trigger evaluasi.

Computed readonly (Composition API) secara default; gunakan writable computed bila memang perlu setter.

Gaya penulisan: pertahankan template bersih; dorong logika ke computed/method sesuai kriteria di atas

Computed unggul untuk nilai turunan yang sering dipakai karena caching berbasis dependensi → efisien dan menjaga template tetap deklaratif.

Method cocok untuk fungsi berargumen, operasi insidental/event-driven, atau saat caching tidak diperlukan. Untuk data besar/kompleks, waspadai biaya tracking computed; pertimbangkan alternatif solusi lain

Referensi:

https://vuejs.org/guide/typescript/composition-api

https://vuejs.org/guide/extras/composition-api-faq