docs(id): translate data methods

src/guide/data-methods.md

@@ -1,8 +1,8 @@
-# Data Properties and Methods
+# Metode/Fungsi dan Properti Data
 
-## Data Properties
+## Properti Data
 
-The `data` option for a component is a function. Vue calls this function as part of creating a new component instance. It should return an object, which Vue will then wrap in its reactivity system and store on the component instance as `$data`. For convenience, any top-level properties of that object are also exposed directly via the component instance:
+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:
 
 ```js
 const app = Vue.createApp({
@@ -16,24 +16,24 @@ const vm = app.mount('#app')
 console.log(vm.$data.count) // => 4
 console.log(vm.count)       // => 4
 
-// Assigning a value to vm.count will also update $data.count
+// Mengubah nilai vm.count juga akan mengubah $data.count
 vm.count = 5
 console.log(vm.$data.count) // => 5
 
-// ... and vice-versa
+// ... begitu juga sebaliknya
 vm.$data.count = 6
 console.log(vm.count) // => 6
 ```
 
-These instance properties are only added when the instance is first created, so you need to ensure they are all present in the object returned by the `data` function. Where necessary, use `null`, `undefined` or some other placeholder value for properties where the desired value isn't yet available.
+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.
 
-It is possible to add a new property directly to the component instance without including it in `data`. However, because this property isn't backed by the reactive `$data` object, it won't automatically be tracked by [Vue's reactivity system](reactivity.html).
+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](reactivity.html).
 
-Vue uses a `$` prefix when exposing its own built-in APIs via the component instance. It also reserves the prefix `_` for internal properties. You should avoid using names for top-level `data` properties that start with either of these characters.
+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`.
 
-## Methods
+## Metode/Fungsi
 
-To add methods to a component instance we use the `methods` option. This should be an object containing the desired methods:
+Untuk menambahkan metode pada sebuah _instance_ komponen, kita menggunakan opsi komponen bernama `methods`. Opsi tersebut harus berupa objek yang berisi metode/fungsi yang dimaksud:
 
 ```js
 const app = Vue.createApp({
@@ -42,7 +42,7 @@ const app = Vue.createApp({
   },
   methods: {
     increment() {
-      // `this` will refer to the component instance
+      // `this` akan mengarah ke _instance_ komponen
       this.count++
     }
   }
@@ -57,63 +57,63 @@ vm.increment()
 console.log(vm.count) // => 5
 ```
 
-Vue automatically binds the `this` value for `methods` so that it always refers to the component instance. This ensures that a method retains the correct `this` value if it's used as an event listener or callback. You should avoid using arrow functions when defining `methods`, as that prevents Vue from binding the appropriate `this` value.
+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.
 
-Just like all other properties of the component instance, the `methods` are accessible from within the component's template. Inside a template they are most commonly used as event listeners:
+Seperti properti _instance_ komponen lainnya, `methods` dapat diakses di dalam templat komponen. Pada umumnya mereka digunakan sebagai _event listener_:
 
 ```html
 <button @click="increment">Up vote</button>
 ```
 
-In the example above, the method `increment` will be called when the `<button>` is clicked.
+Pada contoh di atas, metode/fungsi `increment` akan dipanggil ketika `<button>` diklik.
 
-It is also possible to call a method directly from a template. As we'll see shortly, it's usually better to use a [computed property](computed.html) instead. However, using a method can be useful in scenarios where computed properties aren't a viable option. You can call a method anywhere that a template supports JavaScript expressions:
+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](computed.html) 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:
 
 ```html
 <span :title="toTitleDate(date)">
   {{ formatDate(date) }}
 </span>
 ```
 
-If the methods `toTitleDate` or `formatDate` access any reactive data then it will be tracked as a rendering dependency, just as if it had been used in the template directly.
+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.
 
-Methods called from a template should not have any side effects, such as changing data or triggering asynchronous processes. If you find yourself tempted to do that you should probably use a [lifecycle hook](instance.html#lifecycle-hooks) instead.
+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_](instance.html#lifecycle-hooks) sebagai gantinya.
 
-### Debouncing and Throttling
+### _Debouncing_ dan _Throttling_
 
-Vue doesn't include built-in support for debouncing or throttling but it can be implemented using libraries such as [Lodash](https://lodash.com/).
+Vue tidak memiliki dukungan bawaan untuk _debouncing_ atau _throttling_ tetapi keduanya dapat diimplementasi menggunakan pustaka seperti [Lodash](https://lodash.com/).
 
-In cases where a component is only used once, the debouncing can be applied directly within `methods`:
+Pada kasus ketika komponen digunakan sekali, _debouncing_ dapat diterapkan secara langsung di dalam `methods`:
 
 ```html
 <script src="https://unpkg.com/[email protected]/lodash.min.js"></script>
 <script>
   Vue.createApp({
     methods: {
-      // Debouncing with Lodash
+      // _Debouncing_ menggunakan Lodash
       click: _.debounce(function() {
-        // ... respond to click ...
+        // ... merespon klik ...
       }, 500)
     }
   }).mount('#app')
 </script>
 ```
 
-However, this approach is potentially problematic for components that are reused because they'll all share the same debounced function. To keep the component instances independent from each other, we can add the debounced function in the `created` lifecycle hook:
+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`:
 
 ```js
 app.component('save-button', {
   created() {
-    // Debouncing with Lodash
+    // _Debouncing_ dengan Lodash
     this.debouncedClick = _.debounce(this.click, 500)
   },
   unmounted() {
-    // Cancel the timer when the component is removed
+    // Batalkan penghitung waktu ketika komponen dihilangkan
     this.debouncedClick.cancel()
   },
   methods: {
     click() {
-      // ... respond to click ...
+      // ... merespon klik ...
     }
   },
   template: `