# Metode/Fungsi dan Properti Data

# Properti Data

Belajar cara menggunakan data dan method dari Video gratis milik Vueschool

# Data Properties

Properti data untuk komponen berbentuk fungsi. Vue memanggil fungsi ini sebagai bagian dari pembuatan instance komponen baru. Properti ini harus mengembalikan nilai objek, yang kemudian Vue akan membungkusnya pada sistem reaktivitasnya dan menyimpan instance komponen sebagai $data. Untuk kemudahan Anda, semua properti yang terletak pada level utama objek tersebut tersedia secara langsung melalui instance komponen:

const app = Vue.createApp({
  data() {
    return { count: 4 }
  }
})

const vm = app.mount('#app')

console.log(vm.$data.count) // => 4
console.log(vm.count)       // => 4

// Mengubah nilai vm.count juga akan mengubah $data.count
vm.count = 5
console.log(vm.$data.count) // => 5

// ... begitu juga sebaliknya
vm.$data.count = 6
console.log(vm.count) // => 6
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Properti instance ini hanya ditambahkan ketika instance pertama kali dibuat, sehingga Anda perlu memastikan mereka tersedia pada hasil kembalian fungsi data. Jika dibutuhkan, gunakan null, undefined atau nilai placeholder lainnya untuk properti yang nilainya belum tersedia.

Sangat memungkinkan untuk menambahkan properti secara langsung ke instance komponen tanpa menambahkannya ke data. Namun, karena properti ini tidak tersedia sebagai objek $data, ia tidak akan terlacak secara otomatis oleh sistem reaktivitas Vue.

Vue menggunakan awalan $ untuk menyediakan API bawaannya sendiri melalui instance komponen. Vue juga menyimpan awalan _ untuk properti internal. Anda harus menghindari menggunakan nama dengan awalan karakter tersebut untuk properti level atas data.

# Metode/Fungsi

Untuk menambahkan metode pada sebuah instance komponen, kita menggunakan opsi komponen bernama methods. Opsi tersebut harus berupa objek yang berisi metode/fungsi yang dimaksud:

const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` akan mengarah ke _instance_ komponen
      this.count++
    }
  }
})

const vm = app.mount('#app')

console.log(vm.count) // => 4

vm.increment()

console.log(vm.count) // => 5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Vue memasang this secara otomatis untuk methods sehingga ia selalu mengarah ke instance komponen. Hal tersebut memastikan metode/fungsi mengarah ke nilai this yang tepat jika digunakan pada event listener atau callback. Anda harus menghindari penggunaan arrow functions ketika mendeklarasikan methods, karena hal tersebut dapat mencegah Vue memasang nilai this yang sesuai.

Seperti properti instance komponen lainnya, methods dapat diakses di dalam templat komponen. Pada umumnya mereka digunakan sebagai event listener:

<button @click="increment">Up vote</button>
1

Pada contoh di atas, metode/fungsi increment akan dipanggil ketika <button> diklik.

Selain itu, kita juga dapat memanggil metode/fungsi secara langsung melalui templat. Yang akan kita lihat sebentar lagi, pada umumnya akan lebih baik jika menggunakan properti computed sebagai gantinya. Namun, menggunakan metode/fungsi dapat berguna pada kasus dimana properti computed bukan merupakan opsi yang bijak. Anda dapat memanggil metode/fungsi dimanapun pada templat yang mendukung ekspresi JavaScript:

<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>
1
2
3

Jika metode/fungsi toTitleDate atau formatDate mengakses data reaktif apapun, ia akan dilacak sebagai dependensi pe-render-an, begitu juga jika ia digunakan di templat secara langsung.

Metode/fungsi yang dipanggil dari templat tidak boleh memiliki efek apapun, seperti mengubah data atau memicu proses asinkronus. Jika Anda ingin melakukan hal tersebut, Anda seharusnya menggunakan lifecycle hook sebagai gantinya.

# Debouncing dan Throttling

Vue tidak memiliki dukungan bawaan untuk debouncing atau throttling tetapi keduanya dapat diimplementasi menggunakan pustaka seperti Lodash (opens new window).

Pada kasus ketika komponen digunakan sekali, debouncing dapat diterapkan secara langsung di dalam methods:

<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
<script>
  Vue.createApp({
    methods: {
      // _Debouncing_ menggunakan Lodash
      click: _.debounce(function() {
        // ... merespon klik ...
      }, 500)
    }
  }).mount('#app')
</script>
1
2
3
4
5
6
7
8
9
10
11

Bagaimanapun juga, pendekatan ini berpotensi memiliki masalah untuk komponen yang digunakan berkali-kali karena mereka berbagi fungsi debounce yang sama. Untuk menjaga instance komponen mandiri satu sama lain, kita dapat menambahkan fungsi debounce pada lifecycle hook created:

app.component('save-button', {
  created() {
    // _Debouncing_ dengan Lodash
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    // Batalkan penghitung waktu ketika komponen dihilangkan
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... merespon klik ...
    }
  },
  template: `
    <button @click="debouncedClick">
      Save
    </button>
  `
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Deployed on Netlify.
Pembaruan terakhir: 2021-06-12, 08:35:35 UTC