Komponen yang Dinamis & Async

Sebelum mulai membaca halaman ini, kami berasumsi bahwa Anda telah membaca Dasar-Dasar Komponen. Baca halaman itu terlebih dahulu bila Anda belum mengerti tentang komponen.

keep-alive dengan Komponen yang Dinamis

Sebelumnya, kami menggunakan atribut is untuk berpindah antar komponen di dalam antarmuka tab:

<component v-bind:is="currentTabComponent"></component>

Saat berpindah antar komponen, terkadang Anda ingin mempertahankan statenya atau menghindari render ulang dengan alasan kinerja yang lebih baik (performa). Sebagai contoh, saat kami memperluas antarmuka yang ada di dalam tab:

Jika Anda memilih salah satu postingan di tab Posts, kemudian pindah ke tab Archive, kemudian pindah lagi ke tab Posts, Anda akan melihat bahwa tab Posts tidak lagi menampilkan postingan yang Anda pilih sebelumnya. Itu karena setiap kali Anda berpindah ke tab baru, Vue akan membuat Instance baru dari currentTabComponent.

Membuat kembali komponen yang dinamis merupakan tindakan yang bermanfaat, tapi dalam kasus ini, kami ingin sekali Instance komponen tab di-cache setelah dibuat pertama kali. Untuk mengatasi masalah ini, Kami akan membungkus komponen dinamis kami dengan elemen <keep-alive>:

<!-- Komponen yang tidak aktif akan di-*cache*! -->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

Lihat hasilnya di bawah ini:

Sekarang tab Posts bisa mempertahankan statenya (postingan yang telah dipilih) bahkan saat tidak di-render. Lihat di fiddle untuk kode lengkapnya.

Perhatikan bahwa <keep-alive> membutuhkan nama untuk semua komponen yang akan dipindahkan, baik menggunakan opsi name pada komponen, atau menggunakan nama dari komponen yang telah didaftarkan secara lokal/global.

Lihat detail selengkapnya tentang <keep-alive> di API reference.

Komponen Async

Di sebuah aplikasi yang besar, mungkin kami perlu membagi aplikasi kami menjadi beberapa bagian kecil, dan hanya memuat komponen dari server saat kami membutuhkannya. Untuk membuatnya lebih mudah, Vue memungkinkan Anda untuk mendefinisikan komponen Anda sebagai factory function yang secara asinkron menyelesaikan pendefinisian komponen Anda. Vue hanya akan memicu factory function saat komponen perlu di-render dan akan di-cache hasilnya untuk di-render kembali di masa mendatang. Misalnya:

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // Lewati pendefinisian komponen ke *resolve callback*
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

Seperti yang Anda lihat, factory function akan menerima resolve callback, yang harus dipanggil saat Anda telah mengambil definisi komponen Anda dari server. Anda juga bisa memanggil reject(reason) untuk menunjukkan bahwa pemuatan komponen Anda telah gagal. setTimeout di sini hanya untuk demonstrasi; bagaimana cara mengambil komponen, itu terserah Anda. Salah satu opsi yang kami sarankan adalah menggunakan komponen async dengan Fitur code-splitting Webpack:

Vue.component('async-webpack-example', function (resolve) {
  // Sintaks khusus ini akan memberikan instruksi ke webpack untuk
  // membagi kode *built* Anda menjadi *bundles* secara otomatis
  // yang akan di muat oleh *Ajax requests*.
  require(['./my-async-component'], resolve)
})

Anda juga bisa mengembalikan Promise di factory function, jadi dengan sintaks Webpack 2 dan ES2015 yang bisa Anda lakukan adalah:

Vue.component(
  'async-webpack-example',
  // *function* `import` akan mengembalikan *Promise*.
  () => import('./my-async-component')
)

Saat menggunakan pendaftaran lokal, Anda juga bisa langsung menyediakan function yang akan mengembalikan Promise:

new Vue({
  // ...
  components: {
    'my-component': () => import('./my-async-component')
  }
})

Jika Anda pengguna Browserify yang ingin menggunakan komponen async, sayangnya pembuat Browserify telah menjelaskan secara resmi bahwa memuat async di Browserify itu tidak didukung. Komunitas Browserify telah menemukan beberapa solusi yang mungkin bermanfaat untuk aplikasi yang sudah ada dan kompleks. Untuk semua skenario lainnya, kami sarankan untuk menggunakan webpack untuk sistem build yang mendukung async.

Menangani Pemuatan State

Baru di versi 2.3.0+

Async component factory juga bisa mengembalikan objek dengan menggunakan format berikut:

const AsyncComponent = () => ({
  // Komponen yang dimuat (harus *Promise*)
  component: import('./MyComponent.vue'),
  // Komponen yang akan di gunakan saat komponen *async* sedang dimuat
  loading: LoadingComponent,
  // Komponen yang digunakan jika memuat gagal
  error: ErrorComponent,
  // Jeda sebelum menampikan komponen yang sedang dimuat. Default: 200ms.
  delay: 200,
  // Komponen *error* akan ditampilkan jika batas waktu
  // yang disediakan telah dilampaui. Default: Infinity.
  timeout: 3000
})

Perhatikan bahwa Anda harus menggunakan Vue Router 2.4.0+ jika Anda ingin menggunakan sintaks di atas untuk route komponen.