# Custom Directives
breaking

# Gambaran Umum

Fungsi hook pada directives telah berganti nama agar lebih selaras dengan siklus hidup komponen. Berikut merupakan gambaran singkat mengenai apa yang telah berubah:

Additionally, the expression string is no longer passed as part of the binding object.

# 2.x Syntax

Lanjutkan membaca untuk penjelasan lebih lanjut.

# Sintaks Vue versi 2.x

Pada Vue versi 2, custom directives dibuat menggunakan hook-hook berikut untuk mengacu pada salah satu bagian dari siklus hidup komponen, dimana semuanya opsional:

  • bind - Dipanggil saat directive terikat dengan elemen. Hanya diapnggil sekali.
  • inserted - Dipanggil sesudah elemen ditambahkan pada DOM induk.
  • update - Hook ini dipanggil ketika elemen diperbarui, namun turunannya belum diperbarui.
  • componentUpdated - Hook ini dipanggil sesudah komponen dan turunannya selesai diperbarui.
  • unbind - Hook ini dipanggil sesudah directive dihapus. Hanya dipanggil sekali.

Berikut merupakan contoh dari directives:

<p v-highlight="'yellow'">Sorot elemen ini supaya berlatar kuning cerah</p>
1
Vue.directive('highlight', {
  bind(el, binding, vnode) {
    el.style.background = binding.value
  }
})
1
2
3
4
5

Pada penyetelan awal untuk komponen di atas, directive mengikat sebuah style dengan meneruskan sebuah nilai yang dapat diperbarui menjadi nilai lain pada aplikasi.

# Sintaks Vue versi 3.x

Namun pada Vue versi 3, kami telah membuat API yang lebih kohesif untuk custom directives. Seperti yang dapat Anda lihat, API pada versi sebelumnya berbeda jauh dengan siklus hidup komponen Vue walaupun sama-sama dihubungkan pada kejadian yang sejenis. Sekarang kami telah menyatukan kedua hal tersebut menjadi:

  • created - new! This is called before the element's attributes or event listeners are applied.
  • bind → beforeMount
  • inserted → mounted
  • beforeUpdate: Baru! Hook ini akan dipanggil sebelum elemen diperbarui, mirip dengan hook pada siklus hidup komponen.
  • update → Dihapus! Ada terlalu banyak persamaan dengan updated, sehingga hook ini berlebihan. Mohon gunakan updated.
  • componentUpdated → updated
  • beforeUnmount: Baru! Mirip dengan hook pada siklus hidup komponen, hook ini akan dipanggil sebelum elemen dilepaskan dari DOM.
  • unbind -> unmounted

API akhir akan menjadi seperti berikut:

const MyDirective = {
  created(el, binding, vnode, prevVnode) {}, // new
  beforeMount() {},
  mounted() {},
  beforeUpdate() {}, // baru
  updated() {},
  beforeUnmount() {}, // baru
  unmounted() {}
}
1
2
3
4
5
6
7
8
9

API yang dihasilkan dapat digunakan seperti berikut, mengikuti contoh sebelumnya:

<p v-highlight="'yellow'">Sorot elemen ini supaya berlatar kuning cerah</p>
1
const app = Vue.createApp({})

app.directive('highlight', {
  beforeMount(el, binding, vnode) {
    el.style.background = binding.value
  }
})
1
2
3
4
5
6
7

Sekarang hook siklus hidup pada custom directive telah mengikuti hook siklus hidup pada komponen, sehingga hook tersebut dapat lebih mudah diingat dan dibuat!

# Kasus Tepi: Mengakses Komponen

Umumnya, Anda dianjurkan untuk memisahkan directive dengan komponen tempat directive tersebut digunakan. Mengakses komponen melalui sebuah custom directive menunjukkan sebuah tanda bahwa directive tersebut seharusnya merupakan sebuah komponen. Namun, ada beberapa kasus dimana hal tersebut menjadi masuk akal.

Pada Vue versi 2, komponen harus diakses melalui argumen vnode:

bind(el, binding, vnode) {
  const vm = vnode.context
}
1
2
3

Pada Vue versi 3, komponen tersebut merupakan bagian dari argumen binding:

mounted(el, binding, vnode) {
  const vm = binding.instance
}
1
2
3

WARNING

Dengan dukungan fragments, komponen dapat memiliki lebih dari satu node utama. Ketika digunakan pada komponen yang memiliki lebih dari satu node inti, sebuah directive akan dihiraukan dan sebuah peringatan akan dicatat.

# Migration Strategy

Migration build flag: CUSTOM_DIR

Deployed on Netlify.
Pembaruan terakhir: 2021-08-01, 12:25:55 UTC