Migrasi dari Vue 1.x

FAQ

Woah - halaman ini sangat panjang! Apakah ini berarti 2.0 benar-benar beda, Saya harus mempelajari semua dasarnya dari awal lagi, dan migrasi tidak mungkin dilakukan?

Saya senang Anda bertanya! Jawabannya adalah tidak. Sekitar 90% API masih sama dan konsep inti tidaklah berubah. Halaman ini panjang karena kami ingin memberikan penjelasan yang sangat mendetil dan berisikan banyak contoh-contoh. Tenanglah, ini bukan sesuatu yang Anda harus baca dari atas kebawah!

Darimana saya harus memulai sebuah migrasi?

1. Awali dengan menjalankan pembantu migrasi dalam project saat ini. Kami telah berhati-hati untuk mengecilkan dan memampatkan pengembangan Vue menjadi sebuah command line interface sederhana. Kapan pun mereka mendeteksi adanya fitur yang usang, mereka akan memberitahu Anda, memberikan nasihat, dan menyediakan links ke lebih banyak informasi.

2. Setelah itu, lihatlah daftar isi dari halaman ini yang ada di sidebar. Jika Anda melihat topik yang mungkin mempengaruhi migrasi Anda, namun tidak diberitahukan oleh “pembantu migrasi”, coba lihatlah topik tersebut.

3. Jika Anda mempunyai sebuah tes, jalankan mereka dan amati apa saja yang masih gagal. Jika Anda tidak punya tes, bukalah aplikasi Anda di peramban (browser) dan periksalah peringatan-peringatan dan galat-galat (error) selagi anda bernavigasi di aplikasi Anda.

4. Pada tahap ini, aplikasi Anda seharusnya sudah sepenuhnya termigrasi. Jika Anda masih ingin tahu lebih banyak lagi, Anda dapat membaca sisa dari halaman ini - atau menyelam ke petunjuk the begining yang baru dan lebih baik. Banyak bagian yang bisa di skim, karena Anda sudah familiar dengan konsep-konsep inti.

Berapa lama waktu yang dibutuhkan untuk memigrasi aplikasi Vue 1.x ke 2.0?

Ini bergantung pada beberapa faktor:

• Ukuran dari aplikasi anda (aplikasi kecil sampai menengan mungkin butuh kurang dari sehari)

• Berapa kali anda terganggu dan bermain dengan sebuah fitur baru yang lebih keren. 😉   Tidak menghakimi, ini juga terjadi kepada kami saat kami membangun 2.0.

• Fitur-fitur usang apa saja yang Anda gunakan. Kebanyakan dapat ditingkatkan dan ditemukan penggantinya, tapi beberapa dapat menyita beberapa menit. Jika Anda tidak sedang mengikuti praktik terbaik (best practice), Vue 2.0 akan mencoba lebih keras untuk mengharuskan Anda mengikutinya. Hal ini merupakan hal yang baik untuk jangka panjang, tapi dapat juga berarti refactor yang signifikan (meski bisa jadi terlambat).

Jika Saya upgrade ke Vue 2, akankah Saya juga harus meng-upgrade Vuex dan Vue Router?

Hanya Vue Router 2 yang cocok dengan Vue 2, jadi ya, anda juga harus mengikuti jalur migrasi untuk Vue Router. Untungnya, kebanyakan aplikasi tidak memiliki banyak kode router, jadi melakukan hal ini sepertinya tidak akan memakan waktu lebih dari satu jam.

Untuk Vuex, versi 0.8 saja sudah cocok dengan Vue 2, jadi anda tidak dipaksa untu melakukan upgrade. Satu-satunya alasan anda jika ingin melakukan upgrade secepatnya adalah untuk mendapatkan manfaat dari fitur-fitur baru di Vuex 2, seperti modules dan boilerplate yang dikurangi.

Templat

Fragment Instances ^dihapus

Setiap komponen harus memiliki sebuah elemen root. Fragment instance tidak lagi diperbolehkan. Jika Anda memiliki templat seperti ini:

<p>foo</p>
<p>bar</p>

Disarankan untuk membungkus seluruh konten dalam sebuah elemen baru, seperti ini:

<div>
  <p>foo</p>
  <p>bar</p>
</div>

Kait Siklus Hidup (Lifecycle Hooks)

beforeCompile ^dihapuskan

Gunakan kait created sebagai penggantinya.

compiled ^digantikan

Gunakan kait mounted sebagai penggantinya.

attached ^dihapuskan

Gunakan kastem in-DOM cek di dalam kait lain. Dengan contoh, untuk menggantikan:

attached: function () {
  doSomething()
}

Kamu bisa menggunakan:

mounted: function () {
  this.$nextTick(function () {
    doSomething()
  })
}

detached ^dihapuskan

Gunakan kastem in-DOM cek di dalam kait lain. Dengan contoh, untuk menggantikan:

detached: function () {
  doSomething()
}

Kamu bisa menggunakan:

destroyed: function () {
  this.$nextTick(function () {
    doSomething()
  })
}

init ^{diubah nama}

Gunakan kait beforeCreate sebagai pengganti, dimana merupakan hal yang sama. Digantikan nama dikarenakan merujuk pada konsistensi penamaan methods siklus hidup yang lain.

ready ^digantikan

Gunakan kait baru mounted sebagai pengganti. Harus menjadi perhatian bahwa dengan mounted, tidak ada garansi untuk bahwa page sudah benar benar di load oleh browser. Untuk itu, gunakan Vue.nextTick/vm.$nextTick. Sebagai contoh

mounted: function () {
  this.$nextTick(function () {
    // kode anda dimana memastikan bahwa element sudah di load oleh browser
  })
}

v-for

v-for Argumen Persoalan Order Dalam Array ^diubah

Saat menggunakan index, argumen order dalam array dulunya (index, value). Sekarang (value, index) untuk menjaga konsistensi dengan methods array JavaScript’s seperti forEach dan map.

v-for Argumen Order Tentang Objek ^diubah

Saat menggunakan key sebagai argumen order pada objek dulunya(key, value). Sekarang menjadi (value, key) untuk lebih konsisten dengan objek iterator pada umumnya seperti lodash.

$index and $key ^dihapuskan

Secara implisit variabel $index dan $key dihapuskan karena secara explisit didefinisikan kedalam v-for. Ini membuat kode lebih gampang di baca untuk developer yang kurang berpengalaman dengan Vue dan juga membuat perilaku yang lebih jelas saat berkerja dengan nested loops.

track-by ^digantikan

track-by has been replaced with key, which works like any other attribute: without the v-bind: or : prefix, it is treated as a literal string. In most cases, you’d want to use a dynamic binding which expects a full expression instead of a key. For example, in place of:
track-by telah diganti dengan key, dimana berkerja seperti attribut lain: tanpa v-bind: atau : sebagai prefix, key di perlakukan sebagai literal string. DI banyak kasus, kamu mungkin ingin menggunakan binding dinamis dimana mengharapakan suatu full expression daripada kunci saja. Sebagai contoh :

<div v-for="item in items" track-by="id">

Kamu sekarang menuliskan :

<div v-for="item in items" v-bind:key="item.id">

v-for Nila Rentang ^diubah

Dulunya, v-for="number in 10" dengan number dimulai dari 0 ke 9. Sekarang dimulai dari 1 sampai dengan 10.

Props

coerce Opsi Pada Props ^dihapuskan

Jika kamu ingin memaksakan sebuah prop, gunakan nilai hitung berdasarkan prop tersebut. Sebagai contoh, daripada :

props: {
  username: {
    type: String,
    coerce: function (value) {
      return value
        .toLowerCase()
        .replace(/\s+/, '-')
    }
  }
}

Anda dapat menuliskan:

props: {
  username: String,
},
computed: {
  normalizedUsername: function () {
    return this.username
      .toLowerCase()
      .replace(/\s+/, '-')
  }
}

Disini ada beberapa keuntungan:

• Kamu tetap mendapatkan akses pada nilai original pada prop.
• Kamu dipaksa untuk lebih eksplisit, dimana kamu dipaksa memberikan nilai pada nama yang membedakan prop tersebut dari nilai yang di masukan pada prop.

twoWay Prop Option ^dihapus

Prop sekarang selalu satu jalur ke bawah. Untuk menimbulkan efek pada scope induk, komponen harus secara explisit memberikan event daripada harus bergantung pada binding implisit. Untuk informasi selanjutnya, lihat:

• event kastem komponen
• kastem komponen input (using component events)
• Pengelolaan global state

.once and .sync Modifiers on v-bind ^dihapus

Prop sekarang selalu satu jalur ke bawah. Untuk menimbulkan efek pada scope induk, komponen harus secara explisit memberikan event daripada harus bergantung pada binding implisit. Untuk informasi selanjutnya, lihat:

• event kastem komponen
• kastem komponen input (using component events)
• Pengelolaan global state

Mutasi Prop ^usang

Mengubah prop sekarang merupakan sebuah anti-pattern (tidak disarankan dilakukan), contoh mendeklarasikan prop dan men-set prop this.myProp = 'someOtherValue' pada komponen. Dikarenakan mekanisame rendering yang baru, setiap komponen induk melakukan re-render, perubahan lokal komponen tersebut akan ditimpa.

Sebagian besar kasus penggunaan mutasi pada props dapat diganti dengan salah satu opsi ini:

• sebuah properti data, dengan prop di set pada nilai standar
• sebuah computed properti

Prop pada Akar Instance ^digantikan

Pada akar instances Vue (contoh, instances yang dibuat dengan new Vue({ ... })) kamu harus menggunakan propsData sebagai ganti props

Properti Computed (Computed properties)

cache: false ^deprecated

Caching invalidation of computed properties will be removed in future major versions of Vue. Replace any uncached computed properties with methods, which will have the same result.

Pembatalan chaching dari senuah properti computed akan dihapuskan pada versi major Vue selanjutnya. Ganti semua uncached properti computed dengan method, dimana akan menghasailakn hal yang sama

Contoh:

template: '<p>message: {{ timeMessage }}</p>',
computed: {
  timeMessage: {
    cache: false,
    get: function () {
      return Date.now() + this.message
    }
  }
}

atau dengan komponen method:

template: '<p>message: {{ getTimeMessage() }}</p>',
methods: {
  getTimeMessage: function () {
    return Date.now() + this.message
  }
}

Direktif Bawaan

Truthiness/Falsiness dengan v-bind ^diubah

Ketika digunakan dengan v-bind, nilai yang bernilai false sekarang hanya: null, undefined, dan false. ini berarti 0 dan string kosong akan bernilai true. Contohnya, v-bind:draggable="''" diperbaiki menjadi draggable="true".

Untuk atribut yang disebutkan, selain nilai-nilai palsu diatas, nilai string "false" akan di-render sebagai attr="false".

Catatan untuk direktif lainnya (e.g. v-if and v-show), nilai-nilai truthiness JavaScript masih berlaku.

Mengetahui nilai asli dengan v-on ^diubah/sup>

Ketika digunakan pada sebuah komponen, v-on hanya akan mendengarkan event-event yang ter- $emit oleh komponen tersebut. Untuk mendengarkan event DOM bawaan pada elemen root, Anda dapat menggunakan modifier .native. Contohnya:

<my-component v-on:click.native="doSomething"></my-component>

debounce Atribut Param untuk v-model ^dihapus

Vue’s debounce parameter atribut untuk v-model membuat mudah untuk kasus - kasus sederhana, tetapi operasi ini sebenarnya ditolak oleh state updates daripada operasi yang mahal itu sendiri. Ini sebuah perbedaan yang halus, namun akan ada keterbatasan jika aplikasi tersebut tumbuh.

Keterbatasan itu akan muncul ketika merancang indikator pencarian, Seperti:

Menggunakan atribut debounce, tidak ada cara untuk mengenali “Tipe” state, karena kita kehilangan akses pada input real-time state. Namun memisahkan fungsi debounce dari Vue, kami hanya dapat debounce pada operasi yang kami ingin batasi, menghapus keterbatasan pada fitur dapat dikembangkan sebagai berikut:

<!--
Dengan menggunakan fungsi debounce dari lodash atau perpustakaan utilitas khusus lainnya, kami tahu implementasi debounce spesifik yang kami gunakan akan menjadi yang terbaik di kelasnya - dan kita dapat menggunakannya dimana saja. Tidak hanya di template kami.
-->
<script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script>
<div id="debounce-search-demo">
  <input v-model="searchQuery" placeholder="Type something">
  <strong>{{ searchIndicator }}</strong>
</div>

new Vue({
  el: '#debounce-search-demo',
  data: {
    searchQuery: '',
    searchQueryIsDirty: false,
    isCalculating: false
  },
  computed: {
    searchIndicator: function () {
      if (this.isCalculating) {
        return '⟳ Fetching new results'
      } else if (this.searchQueryIsDirty) {
        return '... Typing'
      } else {
        return '✓ Done'
      }
    }
  },
  watch: {
    searchQuery: function () {
      this.searchQueryIsDirty = true
      this.expensiveOperation()
    }
  },
  methods: {
    // This is where the debounce actually belongs.
    expensiveOperation: _.debounce(function () {
      this.isCalculating = true
      setTimeout(function () {
        this.isCalculating = false
        this.searchQueryIsDirty = false
      }.bind(this), 1000)
    }, 500)
  }
})

Keuntungan lain dari pendekatan ini adalah akan ada waktu ketika debouncing tidak cukup sebagai fungsi wrapper. Misalnya, saat memanggil API untuk pencarian saran, menunggu untuk menawarkan saran sampai setelah pengguna berhenti mengetik untuk jangka waktu tertentu bukanlah pengalaman yang ideal. Yang mungkin Anda inginkan adalah fungsi throttling. Sekarang karena Anda sudah menggunakan pustaka utilitas seperti lodash, refactoring untuk menggunakan fungsi throttle sebagai gantinya hanya membutuhkan beberapa detik.

lazy atau number Atribut Param untuk v-model ^diganti

lazy dan number param atribut dapat di modifikasi, untuk membuat lebih jelas, artinya:

<input v-model="name" lazy>
<input v-model="age" type="number" number>

Kamu dapat menggunakan:

<input v-model.lazy="name">
<input v-model.number="age" type="number">

value Atribut dengan v-model ^dihapus

v-model tidak peduli dengan nilai awal dari barisan atribut value. Untuk bisa diprediksi, v-model akan memperlakukan data dari Vue intance sebagai sumber kebenaran.

Maksud dari elemen ini:

<input v-model="text" value="foo">

Didukung dengan data ini:

data: {
  text: 'bar'
}

Akan render dengan nilai “bar” daripada “foo”. Hal yang sama berlaku untuk <textarea> dengan konten yang ada. Daripada:

<textarea v-model="text">
  hello world
</textarea>

Anda harus memastikan nilai awal text adalah “hello world”.

v-model dengan v-for Nilai Primtif Iterasi^dihapus

Kasus seperti ini tidak berfungsi lagi pada:

<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:

<input v-for="obj in objects" v-model="obj.str">

v-bind:style dengan Object Syntax dan !important ^dihapus

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>

v-el and v-ref ^diganti

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.

v-else with v-show ^{di hapus}

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>

Direktif Kustom ^{yang disederhanakan}

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.

Direktif Pengubah .literal ^dihapus

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>

Transisi

Atribut transition ^diubah

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.

Vue.transition untuk transisi yang dapat digunakan kembali ^diubah

Dengan sistem transisi yang terbaru anda dapat menggunakan komponen.

Transition stagger Attribute ^removed

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.

Events

opsi events ^dihapus

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

Vue.directive('on').keyCodes ^diganti

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

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

$dispatch dan $broadcast ^digantikan

$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.

Filter

Filter di Luar Interpolasi Teks ^dihapuskan

Filter sekarang hanya dapat digunakan dalam interpolasi text ({{ }} 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:

Menggantikan Filter debounce

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.

Menggantikan filter limitBy

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)
  }
}

Menggantikan filter filterBy

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)
  )
})

Menggantikan filter orderBy

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:

_.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc'])

Filter Argumen Sintaks ^diganti

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>

Filter text bawaan ^dihapuskan

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

Menggantikan Filter json

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

Menggantikan Filter capitalize

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

Menggantikan Filter uppercase

text.toUpperCase()

Menggantikan Filter lowercase

text.toLowerCase()

Menggantikan Filter pluralize

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'
  }
}

Replacing the currency Filter

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

'$' + price.toFixed(2)

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.

Filter Dua Arah ^diganti

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.

Slot

Slot Duplikat ^dihapuskan

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.

Atribut gaya pada slot ^removed

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.

Attribut Spesial

keep-alive Attribute ^replaced

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 <keep-alive> 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>

interpolasi

Interpolasi diantara atribut ^dihapuskan

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
  }
}

Interpolasi HTML ^dihapuskan

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

Satu kali binding ^digantikan

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

Reaktifitas

vm.$watch ^digantikan

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.

vm.$set ^digantikan

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

vm.$delete ^digantikan

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

Array.prototype.$set ^dihapuskan

Gunakan Vue.set sebagai gantinya.

Array.prototype.$remove ^dihapuskan

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)
  }
}

Vue.set dan Vue.delete pada instance Vue ^dihapuskan

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).

vm.$data ^dihapuskan

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).

vm.$get ^dihapuskan

Sebagai gantinya, mengambil data reaktif secara langsung.

Metode Instance DOM-terfokus (DOM-Focused Instance Methods)

vm.$appendTo ^dihapuskan

Gunakan API DOM asli (native):

myElement.appendChild(vm.$el)

vm.$before ^dihapuskan

Gunakan API DOM asli (native):

myElement.parentNode.insertBefore(vm.$el, myElement)

vm.$after ^dihapuskan

Gunakan API DOM asli (native):

myElement.parentNode.insertBefore(vm.$el, myElement.nextSibling)

Atau jika myElement merupakan komponen anak terakhir

myElement.parentNode.appendChild(vm.$el)

vm.$remove ^dihapuskan

Gunakan API DOM asli (native):

vm.$el.remove()

Metode pada Meta Instance (Meta Instance Methods)

vm.$eval ^dihapuskan

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.

vm.$interpolate ^dihapuskan

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.

vm.$log ^dihapuskan

Gunakan Vue Devtools untuk pengalaman debugging yang optimal.

Opsi pada Instance DOM (Instance DOM Options)

replace: false ^dihapuskan

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',
      }
    }, /* ... */)
  }
})

Global Config

Vue.config.debug ^removed

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

Vue.config.async ^removed

Async is now required for rendering performance.

Vue.config.delimiters ^replaced

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

Vue.config.unsafeDelimiters ^removed

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

API Global

Vue.extend dengan el ^dihapuskan

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

Vue.elementDirective ^dihapuskan

Gunakan komponen sebagai gantinya.

Vue.partial ^dihapuskan

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.