Vue.js

# API Global
breaking

Vue versi 2.x memiliki beberapa API dan konfigurasi yang secara global mengubah perilaku Vue. Sebagai contoh, untuk membuat sebuah komponen global, Anda akan menggunakan API Vue.component seperti berikut:

Vue.component('button-counter', {
  data: () => ({
    count: 0
  }),
  template: '<button @click="count++">Ditekan sebanyak {{ count }} kali.</button>'
})
1
2
3
4
5
6

Mirip dengan komponen global, berikut merupakan bagaimana sebuah directive global dideklarasikan:

Vue.directive('focus', {
  inserted: el => el.focus()
})
1
2
3

Walaupun cara di atas cenderung praktis, namun cara tersebut menimbulkan beberapa masalah. Secara teknis, Vue versi 2 tidak memiliki konsep "aplikasi". Apa yang Anda definisikan sebagai sebuah aplikasi sebenarnya merupakan sebuah objek Vue utama yang dibuat menggunakan new Vue(). Setiap objek Vue dibuat dari konstruktor Vue yang sama akan memiliki konfigurasi global yang sama. Sehingga:

  • Konfigurasi global mempermudah adanya intervensi pada kasus uji lain selama proses pengujian secara tidak sengaja. Pengguna harus berhati-hati dalam menyimpan konfigurasi global yang asli dan mengembalikan konfigurasi tersebut setelah setiap kasus uji dijalankan (sebagai contoh, mengembalikan Vue.config.errorHandler seperti sedia kala). Bahkan, beberapa API seperti Vue.use dan Vue.mixin tidak memiliki cara untuk mengembalikan perubahan yang mereka lakukan. Hal tersebut membuat pengujian yang melibatkan plugin menjadi rumit. Nyatanya, vue-test-utils harus mengimplementasikan sebuah API khusus bernama createLocalVue untuk mengatasi masalah tersebut:

    import { createLocalVue, mount } from '@vue/test-utils'
    1
    2

// buat sebuah konstruktor Vue khusus const vueLokal = createLocalVue()

// tambahkan sebuah plugin secara global pada konstruktor Vue lokal vueLokal.use(PluginKu)

// teruskan localVue pada opsi mount mount(Component, { vueLokal })


- Konfigurasi global mempersulit untuk mendistribusikan objek Vue yang sama pada lebih dari satu aplikasi pada halaman yang sama, namun memiliki konfigurasi global yang berbeda.

  ```js
  // Kode dibawah ini akan berpengaruh pada kedua objek di bawah
  Vue.mixin({
    /* ... */
  })

  const app1 = new Vue({ el: '#app-1' })
  const app2 = new Vue({ el: '#app-2' })
1
2
3
4
5
6
7
8
9
10
11

Untuk mengatasi masalah tersebut, pada Vue 3 kami memperkenalkan

# Sebuah API Global Baru: createApp

Method createApp akan mengembalikan sebuah objek aplikasi, sebuah konsep baru pada Vue versi 3.

import { createApp } from 'vue'

const app = createApp({})
1
2
3

Jika Anda menggunakan versi CDN Vue, fungsi createApp dapat diakses melalui objek global Vue:

const { createApp } = Vue

const app = createApp({})
1
2
3

Sebuah objek aplikasi merupakan bagian dari API global pada versi sebelumnya. Secara praktis, hal tersebut berarti bahwa setiap API yang mengubah perilaku Vue secara global telah dipindahkan pada objek aplikasi. Berikut merupakan tabel perbandingan antara API global saat ini dan API pada objek aplikasi:

API Global Vue versi 2.x API objek Vue versi 3.x (app)
Vue.config app.config
Vue.config.productionTip dihapus (lihat penjelasan)
Vue.config.ignoredElements app.config.isCustomElement (lihat penjelasan)
Vue.component app.component
Vue.directive app.directive
Vue.mixin app.mixin
Vue.use app.use (lihat penjelasan)
Vue.prototype app.config.globalProperties (lihat penjelasan)

API global lainnya yang tidak mengubah perilaku Vue secara global telah dipindahkan menjadi named export, seperti yang tertera pada Treeshaking API Global.

# config.productionTip Dihapus

Pada Vue versi 3.x, saran "gunakan produksi build" hanya akan muncul apabila Anda menggunakan kode produksi selama pengembangan dan kode produksi penuh (kode program yang menyertakan kompilator waktu eksekusi dan memiliki peringatan)

Untuk kode Vue yang memanfaatkan modul ES, karena kode tersebut digunakan dengan bundler, dan karena kebanyakan sebuah CLI atau boilerplate telah mengatur variabel produksi dengan benar, saran tersebut tidak akan muncul kembali.

# config.ignoredElements Sekarang Menjadi config.isCustomElement

Opsi ini diperkenalkan dengan tujuan untuk menyediakan dukungan pada elemen kustom bawaan, sehingga perubahan nama yang dilakukan lebih mencerminkan kegunaan dari opsi ini. Opsi yang baru juga mampu menerima sebuah fungsi sehingga lebih fleksibel dibandingkan cara lama yang hanya menerima string atau RegExp:

// sebelum
Vue.config.ignoredElements = ['my-el', /^ion-/]

// sesudah
const app = createApp({})
app.config.isCustomElement = tag => tag.startsWith('ion-')
1
2
3
4
5
6

Penting

Pada Vue versi 3.0, pemeriksaan pada elemen untuk memeriksa apakah elemen tersebut merupakan sebuah komponen atau bukan telah dipindahkan pada fase kompilasi template, sehingga opsi ini hanya berpengaruh apabila Anda menggunakan kompilator pada waktu eksekusi. Apabila Anda menggunakan kode program yang telah dibangun sepenuhnya, opsi isCustomElement harus diteruskan pada @vue/compiler-dom pada penyetelan pembangunan kode program - sebagai contoh, melalui opsi compilerOptions pada vue-loader (opens new window).

  • Apabila config.isCustomElement ditetapkan saat Anda menggunakan kode program yang telah dibangun sepenuhnya, sebuah peringatan akan muncul dan meminta pengguna untuk meneruskan opsi tersebut pada penyetelan pembangunan kode program.
  • Opsi ini akan menjadi opsi utama baru pada konfigurasi Vue CLI.

# Vue.prototype Diganti Dengan config.globalProperties

Pada Vue versi 2, Vue.prototype biasanya digunakan untuk menambahkan properti baru yang dapat digunakan pada seluruh komponen yang ada pada aplikasi.

Opsi yang sama dengan opsi tersebut pada Vue 3 adalah config.globalProperties. Properti-properti yang didaftarkan menggunakan opsi ini akan disalin sebagai bagian dari instansiasi komponen pada aplikasi:

// sebelum - Vue versi 2
Vue.prototype.$http = () => {}
1
2
// sesudah - Vue versi 3
const app = createApp({})
app.config.globalProperties.$http = () => {}
1
2
3

Opsi provide (lihat penjelasan berikut) juga dapat menjadi alternatif dari globalProperties.

# Catatan untuk Pengembang Plugin

Biasanya, pengembang plugin memilih untuk melakukan instalasi plugin secara otomatis pada kode UMD menggunakan Vue.use. Sebagai contoh, berikut merupakan cara plugin resmi vue-router melakukan instalasi pada lingkungan perambah:

var inBrowser = typeof window !== 'undefined'
/* … */
if (inBrowser && window.Vue) {
  window.Vue.use(VueRouter)
}
1
2
3
4
5

Karena API global use sudah tidak tersedia pada Vue versi 3, cara ini tidak dapat digunakan lagi dan memanggil Vue.use akan menghasilkan sebuah peringatan. Sebaliknya, pengguna akhir sekarang harus menyatakan penggunaan plugin secara eksplisit pada objek aplikasi:

const app = createApp(MyApp)
app.use(VueRouter)
1
2

# Memasang Objek Aplikasi

Setelah diinisialisasi menggunakan createApp(/* opsi */), objek aplikasi app dapat digunakan untuk memasang objek utama Vue menggunakan app.mount(domTarget):

import { createApp } from 'vue'
import AplikasiKu from './AplikasiKu.vue'

const app = createApp(AplikasiKu)
app.mount('#app')
1
2
3
4
5

Dengan seluruh perubahan yang terjadi, komponen dan directive yang sudah ditulis pada awal panduan ini dapat ditulis ulang menjadi seperti berikut:

const app = createApp(MyApp)

app.component('button-counter', {
  data: () => ({
    count: 0
  }),
  template: '<button @click="count++">Ditekan sebanyak {{ count }} kali.</button>'
})

app.directive('focus', {
  mounted: el => el.focus()
})

// sekarang setiap objek aplikasi dipasang menggunakan app.mount(), bersama
// dengan seluruh komponen, akan memiliki komponen `button-counter` yang sama
// dan directive `focus` tanpa mempengaruhi objek Vue global
app.mount('#app')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# Provide / Inject

Mirip dengan penggunaan opsi provide pada objek utama Vue versi 2.x, sebuah objek aplikasi yang dibangun menggunakan Vue versi 3 juga dapat menyediakan dependency yang dapat diteruskan oleh segala komponen yang ada pada aplikasi:

// pada berkas utama
app.provide('panduan', 'Panduan Vue 3')

// pada komponen turunan
export default {
  inject: {
    buku: {
      from: 'panduan'
    }
  },
  template: `<div>{{ buku }}</div>`
}
1
2
3
4
5
6
7
8
9
10
11
12

Menggunakan provide akan sangat berguna ketika sedang membangun sebuah plugin, sebagai alternatif dari globalProperties.

# Mendistribusikan Konfigurasi Antar Aplikasi

Salah satu cara untuk mendistribusikan konfigurasi — seperti komponen dan _directive — antar aplikasi adalah dengan membuat fungsi factory seperti berikut:

import { createApp } from 'vue'
import Foo from './Foo.vue'
import Bar from './Bar.vue'

const buatAplikasi = opsi => {
  const app = createApp(options)
  app.directive('focus', /* ... */)

  return app
}

buatAplikasi(Foo).mount('#foo')
buatAplikasi(Bar).mount('#bar')
1
2
3
4
5
6
7
8
9
10
11
12
13

Sekarang, directive focus akan tersedia pada objek Foo dan Bar beserta seluruh turunannya.

Deployed on Netlify.
Pembaruan terakhir: 2/28/2021, 1:53:18 PM

← Treeshaking API Global →