# Opsi Data
breaking

# Gambaran Umum

MERUSAK: deklarasi opsi data pada komponen tidak lagi menerima objek JavaScript murni dan mengharapkan sebuah deklarasi fungsi.
MERUSAK: ketika menggabungkan nilai kembalian data dari mixins atau extends, penggabungan sekarang akan dilakukan secara dangkal, bukan dalam (hanya properti inti yang akan digabungkan).

# Sintaks Vue versi 2.x

Pada Vue versi 2.x, pengembang dapat mendefinisikan opsi data dengan sebuah objek atau sebuah fungsi.

Sebagai contoh:

<!-- Deklarasi Objek -->
<script>
  const app = new Vue({
    data: {
      apiKey: 'a1b2c3'
    }
  })
</script>

<!-- Deklarasi Fungsi -->
<script>
  const app = new Vue({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  })
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Walaupun hal tersebut memberi kemudahan dalam hal komponen inti yang mempunyai state bersama, namun kemampuan tersebut membingungkan karena hanya dapat digunakan pada komponen inti.

# Pembaruan pada Vue versi 3.x

Pada Vue versi 3.x, opsi data telah distandarisasikan supaya hanya menerima sebuah fungsi yang mengembalikan sebuah objek.

Berdasarkan contoh di atas, hanya akan ada satu implementasi yang mungkin untuk kode tersebut:

<script>
  import { createApp } from 'vue'

  createApp({
    data() {
      return {
        apiKey: 'a1b2c3'
      }
    }
  }).mount('#app')
</script>

1
2
3
4
5
6
7
8
9
10
11

# Perubahan Perilaku Penggabungan Mixin

Sebagai tambahan, ketika data() dari sebuah komponen dan basis mixins atau extends digabungkan, penggabungan akan dilakukan secara dangkal:

const Mixin = {
  data() {
    return {
      pengguna: {
        nama: 'Jack',
        id: 1
      }
    }
  }
}

const KomponenA = {
  mixins: [Mixin],
  data() {
    return {
      pengguna: {
        id: 2
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Pada Vue versi 2.x, $data yang dihasilkan adalah:

{
  pengguna: {
    id: 2,
    nama: 'Jack'
  }
}

1
2
3
4
5
6

Pada Vue versi 3.0, hasilnya adalah:

{
  pengguna: {
    id: 2
  }
}

1
2
3
4
5

# Strategi Migrasi

Untuk pengguna yang bergantung pada deklarasi objek, kami menyarankan:

Mengekstrak data bersama pada sebuah objek eksternal dan menggunakan objek tersebut sebagai sebuah properti pada data
Menulis ulang acuan pada data bersama untuk menunjuk pada objek bersama baru

Untuk pengguna yang bergantung pada perilaku penggabungan mixin yang dalam, kami menyarankan Anda untuk menstruktur ulang kode program Anda untuk menghindari ketergantungan tersebut, karena penggabungan mixin yang dalam merupakan sesuatu yang sangat implisit dan mampu menyebabkan logika dalam kode program menjadi lebih sulit untuk dipahami dan didebug.

For users relying on the deep merge behavior from mixins, we recommend refactoring your code to avoid such reliance altogether, since deep merges from mixins are very implicit and can make the code logic more difficult to understand and debug.

← Interoperabilitas Elemen Kustom Opsi emits →