<input v-for="str in strings" v-model="str">

Alasannya adalah kesetaraan Javascript yang akan di *compile dari <input> tersebut:

strings.map(function (str) {
  return createElement('input', ...)
})

Seperti yang Anda lihat, v-model pengikatan dua arah ini tidak masuk akal . Menetapkan str menjadi nilai lain dalam fungsi iterasi tetapi tidak akan melakukan apa-apa karena itu hanya variabel lokal yang berada dalam cakupan fungsi.

Sebagai gantinya, Anda seharusnya menggunakan array objects sehingga v-model bisa memperbaharui field dalam object tersebut. Seperti:

{% codeblock lang:html %} {% endcodeblock %}

{% raw %}

Konsep ini tidak lagi berfungsi:

<p v-bind:style="{ color: myColor + ' !important' }">hello</p>

Jika Anda ingin menimpa !important lainnya, Anda harus menggunakan string syntax:

<p v-bind:style="'color: ' + myColor + ' !important'">hello</p>

{% raw %}

Untuk kesederhanaan, v-el dan v-ref sudah digabungkan menjadi atribut ref , dapat diakses melalui komponen instance $refs. Maksudnya v-el:my-element akan muncul ref="myElement" dan v-ref:my-component nampak ref="myComponent".Ketika digunakan pada elemen normal, ref akan ke DOM elemen, dan ketika menggunakan dalam komponen tersebut , ref akan kembali menggunakan komponen instance.

Karena v-ref bukan lagi sebuah direktif, tetapi adalah atribut spesial, dapat juga didefinisikan secara dinamis. Ini sangat berguna dalam kombinasi dengan v-for. Seperti:

<p v-for="item in items" v-bind:ref="'item' + item.id"></p>

Sebelumnya, v-el/v-ref kombinasi dengan v-for akan menghasilkan array pada elemen/komponen, karena tidak ada cara memberi nama yang unik pada setiap item. Anda masih dapat mencapai ini dengan memberikan item ref yang sama:

<p v-for="item in items" ref="items"></p>

Tidak seperti 1.x, $refs ini tidak reactive, karena mereka sudah terdaftar/diperbaharui selama proses render itu sendiri. Membuat mereka reactive akan membutuhkan duplikasi render pada setiap perubahan.

Disamping itu, $refs dirancang untuk program dalam javascript - Tidak disaranakan penggunaan dalam tampilan, karena akan merujuk pada negara bukan pada instance itu sendiri. Akan terkana pelanggaran dalam tampilan model Vue js sendiri.

{% raw %}

v-else tidak lagi berfungsi dengan v-show. Menggunakan v-if dengan sebuah ekpresi negasi sebagai gantinya. Untuk contohnya, daripada:

<p v-if="foo">Foo</p>
<p v-else v-show="bar">Not foo, but bar</p>

Anda dapat menggunakan:

<p v-if="foo">Foo</p>
<p v-if="!foo && bar">Not foo, but bar</p>

{% raw %}

Direktif-direktif memiliki cakupan tanggung jawab yang sangat dikurangi: mereka sekarang hanya digunakan untuk menerapkan manipulasi DOM pada low level secara langsung. Umumnya, Anda seharusnya menggunakan komponen sebagai abtraksi utama code-reuse.

Beberapa perbedaan yang paling menonjol termasuk:

• Direkftif tidak lagi memiliki instance. Maksudnya tidak lagi memiliki this dalam directive hooks. Sebaliknya, mereka menerima semua yang mungkin dibutuhkan sebagai argumen-argumen. Jika anda benar-benar harus mempertahankan dalam state lintas hooks, Anda dapat menggunakan el.
• Opsi-opsi seperti acceptStatement, deep, priority, dll telah dihapus. Pengganti direktif twoWay , perhatikan contoh ini.
• Beberapa hooks saat ini memiliki perbedaan perilaku dan juga beberapa hooks baru.

Untungnya, karena direktif-direktif baru jauh lebih sederhana, maka kamu dapat menguasainya lebih mudah. Baca Panduan direktif kustom untuk mempelajari lebih lanjut.

{% raw %}

Pengubah .literal sudah dihapus, karena hal yang sama dapat dilakukan dengan mudah memberikan strings literal sebagai nilainya.

Sebagai contoh, Anda bisa memperbaharui:

<p v-my-directive.literal="foo bar baz"></p>

Jadi:

<p v-my-directive="'foo bar baz'"></p>

{% raw %}

Vue's transition system has changed quite drastically and now uses <transition> and <transition-group> wrapper elements, rather than the transition attribute. It's recommended to read the new Transitions guide to learn more.

Sistem transisi sistem sekarang sudah berganti cukup drastis dan sekarang menggunakan <transition> dan <transition-group> elemen pembungkus, daripada memakai atribut transisi. Di rekomendasikan untuk membaca dokumentasi terbaru tentang transisi untuk info lebih lanjut.

{% raw %}

Dengan sistem transisi yang terbaru anda dapat menggunakan komponen.

{% raw %}

Jika kamu ingin membuat transisi list stagger kamu dapat mengontrol timing dengan menyeting dan meng-akses data-index (atau attribut yang sama lain-nya) di dalam elemen. Lihat contoh disini.

{% raw %}

The events option has been removed. Event handlers should now be registered in the created hook instead. Check out the $dispatch and $broadcast migration guide for a detailed example.

Opsi events telah dihapuskan. Event handler untuk sekarang harus di registrasikan pada kait created. Cek dokumentasi migrasi $dispatch dan $broadcast

Cara baru dan ringkas untuk mengatur keyCodes ini adalah melalui Vue.config.keyCodes. Contoh :

// izinkan v-on:keyup.f1
Vue.config.keyCodes.f1 = 112

{% raw %}

$dispatch dan $broadcast sudah dihapuskan untuk lebih explisit saat melakukan komunikasi antar komponen dan menghasilakn state management yang lebih dapat di pelihara, contoh Vuex

Masalahnya adalah event yang mengalir tergantung pada struktur pohon komponen sangat sangatlah sulit untuk dipikirkan, sangat rapuh saat pohon komponen menjadi besar. Hal tersebut sangat susah untuk di-scaling dan hanya membuat sakit kepala pada nantinya. $dispatch dan $broadcast tidak juga menyelesaikan masalah sibling komponen (komponen yang menggunakan props value sama).

Salah satu contoh yang biasa digunakan pada methods ini adalah untuk berkomunikasi antara induk komponen dengan anak langsung induk komponen tersebut. Pada kasus berikut, kamu dapat menggunakan event $emit dari komponen anak menggunakan v-on. Ini membuatmu menjaga kenyamanan pada event dengan menambah secara ekplisit pada event tersebut.

Bagaimanapun itu, saat berkomunikasi antar komponen induk/anak yang jauh, $emit tidak dapat menolongmu. Untuk itu, solusi paling simple adalah dengan menggunakan event hub yang ter-sentralisasi. Cara ini menambahkan keuntungan dengan mengizinkan komunikasi antar komponen, dimanapun posisi komponen itu berada dalam struktur pohon komponen, dikarenakan instance Vue meng-implementasikan antar muka event emitter, kamu sebenarnya dapat menggunakan instance Vue kosong untuk hal ini.

Contoh, katakanlah kita mempunyai sebuah todo app terstruktur seperti berikut:

Todos
├─ NewTodoInput
└─ Todo
   └─ DeleteTodoButton

Kita dapat mengelola komunikasi antar komponen dengan satu event hub:

// Ini adalah event hub yang kita
// gunakan untuk berkomunu kasi antar komponen
var eventHub = new Vue()

Then in our components, we can use $emit, $on, $off to emit events, listen for events, and clean up event listeners, respectively:

Lalu di dalam komponen, kita dapat menggunakan $emit, $on, $off untuk memasukan event, mendengar event, dan menghapus event, dengan benar:

// NewTodoInput
// ...
methods: {
  addTodo: function () {
    eventHub.$emit('add-todo', { text: this.newTodoText })
    this.newTodoText = ''
  }
}

// DeleteTodoButton
// ...
methods: {
  deleteTodo: function (id) {
    eventHub.$emit('delete-todo', id)
  }
}

// Todos
// ...
created: function () {
  eventHub.$on('add-todo', this.addTodo)
  eventHub.$on('delete-todo', this.deleteTodo)
},
// Sangat disarankan untuk menghapus *Event.listener* sebelum \
// komponen di hancurkan (sebelum kait `destroyed`)
beforeDestroy: function () {
  eventHub.$off('add-todo', this.addTodo)
  eventHub.$off('delete-todo', this.deleteTodo)
},
methods: {
  addTodo: function (newTodo) {
    this.todos.push(newTodo)
  },
  deleteTodo: function (todoId) {
    this.todos = this.todos.filter(function (todo) {
      return todo.id !== todoId
    })
  }
}

Pola ini dapat digunakan sebagai ganti $dispatch dan $broadcast pada skenario yang mudah, untuk kasus yang lebih komplex, direkomendasikan menggunakan state management sendiri seperti Vuex.

{% raw %}

Filter sekarang hanya dapat digunakan dalam interpolasi text ({% raw %}{{ }}{% endraw %} tags). Pada dulunya kita menemukan bahwa menggunakan filter didalam directive seperti v-model, v-on, etc malah mendatangkan kompleksitas daripada kenyamanan. Untuk filter list pada v-for juga lebih baik memindahkan filter sebagai computed properties, jadi dapat digunakan kembali di seluruh komponen.

Secara umum, dimana sesuatu dapat dicapai dengan Javascript biasa, kita ingin menghindari sintaks spesial seperti filter untuk menangani hal yang secara umum sama. Berikut adalah cara bagaimana kamu dapat mengganti filter directive bawaan pada Vue:

Daripada menggunakan:

<input v-on:keyup="doStuff | debounce 500">

methods: {
  doStuff: function () {
    // ...
  }
}

Gunakan lodash's debounce (atau mungkin throttle) untuk melimitasi memanggil method yang berat. Kamu dapat menggunakan ini untuk mendapatkan hasil sama seperti diatas:

<input v-on:keyup="doStuff">

methods: {
  doStuff: _.debounce(function () {
    // ...
  }, 500)
}

Untuk lebih lanjut tentang kelebihan strategi ini, lihat the example here with v-model.

Daripada menggunakan:

<p v-for="item in items | limitBy 10">{{ item }}</p>

gunakan Javascript .slice method pada computed property:

<p v-for="item in filteredItems">{{ item }}</p>

computed: {
  filteredItems: function () {
    return this.items.slice(0, 10)
  }
}

Daripada menggunakan:

<p v-for="user in users | filterBy searchQuery in 'name'">{{ user.name }}</p>

Gunakan Javascript .filter method pada computed property:

<p v-for="user in filteredUsers">{{ user.name }}</p>

computed: {
  filteredUsers: function () {
    var self = this
    return self.users.filter(function (user) {
      return user.name.indexOf(self.searchQuery) !== -1
    })
  }
}

Method Javascript .filter juga dapat mengelola operasi penyaringan yang lebih kompleks. Sebagai contoh, jika kamu ingin menemukan setiap user yang aktif secara case-sensitive cocok dengan nama dan email mereka:

var self = this
self.users.filter(function (user) {
  var searchRegex = new RegExp(self.searchQuery, 'i')
  return user.isActive && (
    searchRegex.test(user.name) ||
    searchRegex.test(user.email)
  )
})

Daripada menggunakan:

<p v-for="user in users | orderBy 'name'">{{ user.name }}</p>

Gunakan lodash's orderBy (atau sortBy) pada computed property:

<p v-for="user in orderedUsers">{{ user.name }}</p>

computed: {
  orderedUsers: function () {
    return _.orderBy(this.users, 'name')
  }
}

You can even order by multiple columns:

{% codeblock lang:js %} _.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc']) {% endcodeblock %}

{% raw %}

Sintaks filters untuk argumen sekarang lebih selaras dengan fungsi invokasi pada Javascript.

<p>{{ date | formatDate 'YY-MM-DD' timeZone }}</p>

kita kelilingi argumen dengan tanda kurung dan membatasi argumen dengan koma:

<p>{{ date | formatDate('YY-MM-DD', timeZone) }}</p>

{% raw %}

Walaupun filter pada interpolasi teks masih diperbolehkan, semua filter telah dihapuskan. Sebagai gantinya, sangat di rekomendasikan untuk menggunakan pustaka khusus untuk memecahkan problem pada setiap domain (contoh: date-fns untuk men-format tanggal dan accounting untuk mata uang)

For each of Vue's built-in text filters, we go through how you can replace them below. The example code could exist in custom helper functions, methods, or computed properties.

Untuk setiap direktif filter bawaan Vue, kita mambahas bagaimana kamu dapat menggantinya dibawah ini. Contoh kode dapat ada pada fungsi kastem, method, ataupun computed properties

Kamu sebenarnya tidak membuhtukan ini untuk debugging lagi, Vue otomatis akan mem-format output baik itu teks, angka, array, maupun sebuah objek. Jika kamu ingin mendapatkan fungsionalitas yang sama maka fungsi JSON.stringify dapat membantu, dan kamu dapat menggunakannya pada method atau computed properties

text[0].toUpperCase() + text.slice(1)

text.toUpperCase()

text.toLowerCase()

Paket pluralize di NPM dapat digunakan untuk tujuan ini, tapi jika kamu ingin menjamakkan beberapa kata spesifik atau sebuah keluaran khusus seperti saat mendapatkan 0, maka kamu dapat mendefinisikan fungsi jamak-mu sendiri:

function pluralizeKnife (count) {
  if (count === 0) {
    return 'no knives'
  } else if (count === 1) {
    return '1 knife'
  } else {
    return count + 'knives'
  }
}

Untuk implementasi yang sangat naif, kamu dapat melakukan dengan cara ini

{% codeblock lang:js %} '$' + price.toFixed(2) {% endcodeblock %}

Walau di banyak kasus, kamu akan menemukan perilaku aneh (contoh: 0.035.toFixed(2) dibulatkan ke atas menjadi 0.04, tapi 0.045 dibulatkan kebawah menjadi 0.04), Untuk itu kamu dapat menggunakan pustaka accounting untuk menformat mata uang.

{% raw %}

Beberapa pengguna nyaman menggunakan filter 2 arah dengan v-model untuk membuat isian unik dengan kode yang sedikit. Walaupun kelihatannya mudah tetapi, filter 2 arah juga menyembunyikan kompleksitas yang besar - dan bahkan mendukung UX yang sangat buruk dengan menunda memperbaharui state. Sebagai gantinya, komponen yang membungkus isian sangat di rekomendasikan sebagai cara eksplisit dan kaya fitur untuk membuat isian kastem.

Sebagai contoh, kita akan melakukan migrasi filter dua arah pada mata uang:

Contoh itu hampir berkerja dengan baik, tapi penundaan pembaharuan state dapat menyebabkan perilaku aneh. Contoh, klik pada tab Result dan coba isikan 9.999 pada salah satu isian tersebut. Pada saat isian hilang fokus-nya, nilai pdaa isian akan berubah ke $10.00. Tapi pada saat melihat total kalkulasi yang tersimpan pada data menunjukan '9.999'. Versi realitas yang dilihat user kita tidak sinkron.

Untuk memulai transisi kedepannya dengan solusi yang lebih mudah di Vue 2.0 mari kira bungkus filter ini pada komponen <currency-input>:

This allows us add behavior that a filter alone couldn't encapsulate, such as selecting the content of an input on focus. Now the next step will be to extract the business logic from the filter. Below, we pull everything out into an external currencyValidator object:

Ini memungkinkan kita untuk menambahkan perilaku yang tidak dapat diringkas, seperti memilih konten dari sebuah isian yang sedang kondisi fokus. Langkah selanjutnya adalah meng-ekstrak logis bisnis pada filter. Dibawah, ini kita menarik keluar semuanya menjadi objek currencyValidator:

Ini menambahkan modularitas, tidak hanya membuat mudah untuk migrasi ke Vue 2, tapi juga memungkinkan penguraian mata uang dan format dapat:

• unit testing dalam isolasi dari kode Vue
• digunakan pada bagaian lain dari aplikasi, seperti untuk memvalidasi muatan ke titik akhir API

Setelah validator ini diekstrak, kita juga dapat menggunakannya untuk memecahnkan solusi solusi yang lain. Keanehan pada state sudah dieliminasi dan sebenarnya ini tidak memungkinkan pengguna untuk memasukan isian yang salah, seperti pada isian asli browser.

Kita masih terbatas, dengan filter dan Vue 1.0 secara umum, jadi mari kita selesaikan upgrade ke Vue 2.0:

Kamu mungkin memperhatikan bahwa:

• Setiap aspek pada isian lebih eksplisit, menggunakan kait siklus hidup dan event pada DOM sebagai ganti filter dua arah.
• Kita sekarang dapat menggunakan v-model langsung pada isian kastem, dimana tidak hanya lebih konsisten sama seperti isian normal, tapi juga dapat membuat komponen kita enak digunakan dengan Vuex.
• Karena kita tidak lagi menggunakan opsi filter yang memerlukan nilai untuk dikembalikan, kerja fungsi mata uang yang kita buat dapat diselesaikan secara tidak sinkron (asyncronously). Berarti jika kita mempunyai banyak sekali aplikasi yang harus berkerja dengan mata uang, kita dapat meringkas logika ini sebagai microservice untuk digunakan bersama.

{% raw %}

It is no longer supported to have <slot>s with the same name in the same template. When a slot is rendered it is "used up" and cannot be rendered elsewhere in the same render tree. If you must render the same content in multiple places, pass that content as a prop.

Vue tidak lagi mendukung adanya <slot> dengan nama yang sama di template yang sama. Saat slot di render slot akan "terpakai" dan tidak dapat di render kembali pada pohon render yang sama. Jika kamu harus merender konten yang sama di beberapa tempat, lempar konten tersebut sebagai prop.

{% raw %}

Konten yang dimasukan lewat <slot> bernama sudah tidak lagi menjaga atribut slot. Gunakan elemen pembungkus untuk memberikan gaya, atau untuk kasus penggunaan lanjutan, ubah konten yang dimasukan secara terprogram dengan render functions.

{% raw %}

keep-alive is no longer a special attribute, but rather a wrapper component, similar to <transition>. For example:

keep-alive sekarang sudah tidak termasuk attribut spesial, tetapi sebuah komponen pembungkus, sama halnya seperti <transition>. Contoh:

<keep-alive>
  <component v-bind:is="view"></component>
</keep-alive>

Ini membuat attribut keep-alive dapat digunakan pada banyak komponen anak berkondisi:

<keep-alive>
  <todo-list v-if="todos.length > 0"></todo-list>
  <no-todos-gif v-else></no-todos-gif>
</keep-alive>

Saat `` mempunyai banyak komponen anak, mereka pada akhirnya harus mengevaluasi pada satu anak komponen. Komponen anak mana pun selain yang pertama akan diabaikan.

Saat digunakan bersama <transition>, pastikan ada di dalam komponen tersebut:

<transition>
  <keep-alive>
    <component v-bind:is="view"></component>
  </keep-alive>
</transition>

{% raw %}

Interpolasi diantara atribut sudah tidak lagi valid. Sebagai contoh:

<button class="btn btn-{{ size }}"></button>

Harus diperbaharui untuk menggunakan ekspresi sebaris:

<button v-bind:class="'btn btn-' + size"></button>

Atau sebagai data/properti computed

<button v-bind:class="buttonClasses"></button>

computed: {
  buttonClasses: function () {
    return 'btn btn-' + size
  }
}

{% raw %}

{% raw %}

Interpolasi ({% raw %}{{{ foo }}}{% endraw %}) telah dihapuskan demi v-html directive.

{% raw %}

Satu kali binding ({% raw %}{{* foo }}{% endraw %}) telah digantikan oleh v-once directive.

{% raw %}

Pengamat (Watchers) yang dibuat dengan vm.$watch sekarang terpanggil sebelum komponen yang terasosiasi di render. Ini memberikanmu untuk lebih lanjut memperbaharui state sebelum komponen di render, sehingga menghindari pembaharuan yang tidak perlu. Contoh, kamu dapat memantau properti (prop) sebuah komponen dan memperbaharui data saat properti komponen berubah.

Jika kamu sebelumnya bergantung pada vm.$watch untuk melakukan sesuatu dalam DOM setelah komponen diperbaharui, kamu dapat juga melakukannya pada updated kait suklus hidup Vue.

{% raw %}

vm.$set sekarang adalah padanan dari Vue.set.

{% raw %}

vm.$delete sekarang merupakan padanan dari Vue.delete.

{% raw %}

Gunakan Vue.set sebagai gantinya.

{% raw %}

Gunakan Array.prototype.splice sebagai gantinya. Contoh:

methods: {
  removeTodo: function (todo) {
    var index = this.todos.indexOf(todo)
    this.todos.splice(index, 1)
  }
}

Atau lebih baik, berikan parameter index pada method hapus:

methods: {
  removeTodo: function (index) {
    this.todos.splice(index, 1)
  }
}

{% raw %}

Vue.set dan Vue.delete tidak dapat berkerja lagi pada instance Vue. Sekarang merupakan sebuah kewajiban untuk mendeklarasikan dengan benar properti reaktif tingkat-atas pada opsi data. Jika kamu ingin menghapus properti pada instance Vue atau $data setel ke nol (null).

{% raw %}

Mengantikan instance komponen pada akar $data sekarang telah dilarang. Ini mencegah beberapa kasus langka pada sistem reaktifitas Vue dan membuat state pada komponen lebih dapat di prediksi (khususnya dengan sistem pengecekan-tipe).

{% raw %}

Sebagai gantinya, mengambil data reaktif secara langsung.

{% raw %}

Gunakan API DOM asli (native):

{% codeblock lang:js %} myElement.appendChild(vm.$el) {% endcodeblock %}

{% raw %}

Gunakan API DOM asli (native):

{% codeblock lang:js %} myElement.parentNode.insertBefore(vm.$el, myElement) {% endcodeblock %}

{% raw %}

Gunakan API DOM asli (native):

{% codeblock lang:js %} myElement.parentNode.insertBefore(vm.$el, myElement.nextSibling) {% endcodeblock %}

Atau jika myElement merupakan komponen anak terakhir

{% codeblock lang:js %} myElement.parentNode.appendChild(vm.$el) {% endcodeblock %}

{% raw %}

Gunakan API DOM asli (native):

{% codeblock lang:js %} vm.$el.remove() {% endcodeblock %}

{% raw %}

Tidak ada gunanya. Jika kamu ternyata bergantung pada fitur ini dan tidak tahu bagaimana harus menggantinya, silahkan membuka obrolan pada forum Vue.js untuk ide.

{% raw %}

Tidak ada gunanya. Jika kamu ternyata bergantung pada fitur ini dan tidak tahu bagaimana harus menggantinya, silahkan membuka obrolan pada forum Vue.js untuk ide.

{% raw %}

Gunakan Vue Devtools untuk pengalaman debugging yang optimal.

{% raw %}

Tiap - tiap komponen sekarang selalu menggantikan element yang terkait dengan mereka. Untuk mengsimulasikan sifat dari replace: false, kamu dapat membungkus akar komponen dengan elemen yang sama terhadap elemen yang kamu ganti. Contoh:

new Vue({
  el: '#app',
  template: '<div id="app"> ... </div>'
})

Atau menggunakan fungsi render:

new Vue({
  el: '#app',
  render: function (h) {
    h('div', {
      attrs: {
        id: 'app',
      }
    }, /* ... */)
  }
})

{% raw %}

No longer necessary, since warnings come with stack traces by default now.

{% raw %}

Async is now required for rendering performance.

{% raw %}

This has been reworked as a component-level option. This allows you to use alternative delimiters within your app without breaking 3rd-party components.

{% raw %}

HTML interpolation has been removed in favor of v-html.

{% raw %}

Opsi el sudah tidak dapat digunakan pada Vue.extend. Sekarang hal ini hanay valid sebagai opsi pembuatan instance.

{% raw %}

Gunakan komponen sebagai gantinya.

{% raw %}

Partials telah dihapus dengan alasan untuk menjaga aliran data antara komponen, menggunakan props komponen. Kecuali kamu menggunakan partial pada area yang memerlukan performa lebih, rekomendasi untuk masalah tersebut adalah dengan menggunakan komponen biasa sebagai gantinya. Jika kamu secara dinamis mengikat name dari sebuah partial, kamu dapat menggunakan komponen dinamis.

Jika kamu ternyata menggunakan partial di applikasi andad pada tempat yang membutuhkan performa lebih cepat, maka kamu harus ganti dengan komponen fungsional. Komponen tersebut harus di deklarasikan dengan JS/JSX file (bukan menggunakan .vue file) dan juga stateless dan instanceless, seperti partials. Ini membuat kecepatan render sangat cepat

Keuntungan menggunakan komponen fungsional daripada partial adalah komponen fungsional lebih dinamis, dikarenakan kamu dapat menggunakan javascript seutuhnya pada komponen. Tetapi ada juga hal yang harus di bayar saat menggunakan komponen fungsional. Jika kamu belum pernah menggunakan kerangka kerja dengan fungsi render sebelumnya, mungkin kamu perlu waktu agak lama untuk mempelajarinya.

{% raw %}