読者です 読者をやめる 読者になる 読者になる

Vue2.0で変わった所を調べて見た

この記事はOIC ITCreate Club Advent Calendar 2016 1日目の記事です。

www.adventar.org

今年もアドベントカレンダーの季節がやってきましたね。 10月にVue.jsのVer.2.0がリリースされ、現在では公式ドキュメントの和訳も終了しているので、公式ドキュメントを読みながら変更点を調べてみました。よく使いそうな部分をピックアップしたいと思います。

テンプレート

全てのコンポーネントは,1つのルート要素を持たないといけない仕様になりました。 全体を囲う要素が必要です。

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

ライフサイクル

削除

  • init (置き換え可)
  • beforeCompile (置き換え可)
  • compile (置き換え可)
  • ready (置き換え可)
  • attached
  • detached

追加

  • beforeCreate
  • beforeMount
  • mounted
  • beforeUpdate
  • updated

DOMを利用する際に利用していたreadymountedとDOMの更新後に実行されるVue.nextTick/vm.$nextTickで置き換えるようになったみたいですね。

とくに新しいライフサイクルが追加されたわけでなく1.0のライフサイクルの名称が変わっていたり、組み合わせで置き換えれるものばかりのようです。

Vue 1.x からの移行#ライフサイクルフック

v-for

  • 引数の順序変更

配列 : (index, value) -> (value, index)

オブジェクト : (key, value) -> (value, key)

JavascriptネイティヴなforEachmap、lodashなどの一般的なイテレータと一貫性を保つように変更されました。

  • $indexおよび$key の削除

暗黙的に割り当てられていた$index$keyは使用できず、明示的に書くように変更されました。

プロパティ

  • twoWayプロパティオプション削除

プロパティは暗黙的な双方向バインディングはされなくなり、全て単方向バインディングになりました。親の値を変更したい場合はv-onなどを使い明示的にイベントを発行する必要があります。

この変更に伴いv-bindへの.once.sync修飾子は削除されました。

組み込みディレクティブ

  • v-bindにおける真/偽

偽となりうる値はnull,undefined,そしれfalseのみとなり、0や空の文字列は真となるようです。

v-ifv-showなどのその他のディレクティブは、JavaScript の一般的な真がまだ適用されます。

コンポーネントがルート要素を持つ仕様になったのでコンポーネントタグでclickイベントなどを設定できるようになりました。 設定する場合は.nativeをつけます。

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

フィルタ

v-modev-onディレクティブ上でのフィルタリングdebounceや、v-for上でのリストフィルタリングのfilterByは使用できなくなりました。

代わりにcomputedで算出された値を使用するようです。

展開

  • 属性内での展開

1.0で下記のように使用していたコードは使えません。

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

代わりにインライン式を使用するようです。

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

リアクティブ

  • Aray.prototype.$removeの削除 代わりにネイティヴのArray.prototype.spliceを使用するようです。

まとめ

変更点をざっと見ましたが、全体的にVue.js独自の書き方やAPIを使わず、JavaScriptネイティヴで出来ることはネイティヴでやる方向になってると感じました。これによりVue.jsを知らない人でも読みやすくなったのではないかと思います。

まだVue2.0でがっつりコードを書いていないので今度Vue2.0で何か作って見たいと思います。

最後まで読んでいただきありがとうございました。