はじめに
VueJS Advent Clendar の17日目です。VueJSの1.0から2.0へMigrationした話をします。
VueJSに至る道
AngularJS便利そうだけど色々覚えるの面倒くさいしJSONのデータレンダリングする機能だけ欲しい! と思って色々調べてみたらVueJSなら簡単そう、となって使ってるだけな奴。ちゃんと比較したりVueJSの機能全て把握してるわけではない。
とか適当抜かしてたら、VueJS Calendarでも結構な人が同じようなこと言ってて安心した。
情報源
とりあえず最小限読むべき公式の情報源。こんなブログ読んでる場合ではない。
とは言うものの滅茶苦茶多くて読み切れてない←
あと便利なmigration toolが出ている。全部やれば完全に動く訳は勿論無いが、最小限は出してくれる。
やったこと
自作ゲーム、TrainStampRally がv1.0で書かれているので、とりあえずv2.1.5に上げて、動かなかった部分を適宜修正した。オープンソースでコードはこちら
Attribute内に{{value}}を使ってるやつ
動かなくなってた。素直にv-bindを使おう。
<a href="/{{ category }}/index.html">
<a :href="'/' + category + '/index.html'">
でもなんか読み辛くなるし、個人的にHTML内にソースコード書くのどうよ、っていう派閥なのでびみょ。ただ複数のやり方が許容されているのは良くないという意見もわかる。
ready, compiled→mounted
readyはreplaceされてmountedになり、this.$nextTickで囲えばいいのか…？VueJSのHook系メソッド難しくてイマイチ分かってない。
v-forの仕様変更
その1。idxの順番が変わった。
v-for="idx, elem in elements"
v-for="elem, idx in elements"
既存のmapやforEachへの追従。寧ろ最初からこうしておけよ。
その2。v-forに数値を渡すときの値が0-indexedから1-indexedに。つまり v-for="idx in 10" の結果が0..9から1..10に。クソみたいな変更だ。
$indexの廃止
v-for="elem, idx in elements"
とか書いてidxを使うように。
事前コンパイル
Vueが実行前に事前でコンパイルをするようになったらしく、文法的に間違ってる奴とかがエラー出るようになった。今まではとりあえず動いてしまっていたので、そゆのがあればUpdateで死ぬ。とはいえこれ、メリットばかりではなく…(次に続く
なんかよくわからん問題
data:
train: null
methods:
getTrain:
@train = getJson()
という手法を多用していたのだが、これが幾らかのパターンでnullエラーが出るようになった。HTML側でtrain.speed.toFixed(0)などと最後にtoFixedを呼んだりするときにエラーが出る。よくわからん。とりあえずtoFixed(0)を呼ぶだけのmethodを作って解決している。良く分からないけど、事前コンパイルの弊害という認識でいる。
deleteメソッド
deleteメソッドが予約語に近い扱いであることを知らなくて、deleteっていう名前のメソッドを定義していたのだが、前は問題なく動いていたのだが動かなくなった。まぁこれは予約語使ってる奴が悪い。
typeahead.jsとのコンフリクト
typeahead.jsというinput要素に対しautocompleteを提供するライブラリがあるのだが、こいつがうまく動かなくなった。具体的には補完しても補完前の状態でmodelの変数に束縛されている(VueJSが変更を検知できない)、という挙動を示す。全く良く分からんので、補完したときにmodelを書き換えるイベントを定義して解決した。全体的にこわれててどうしようもなかったので、ライブラリ置き換えを検討中。
AngularにしてもVueJSにしても、見た目変わってるのに変数変わってないという問題が、このタイプのライブラリ多い気がする。
まとめ
わりと小さいプロダクトでも結構変更点が多く、バッドノウハウを多用していたのもあって、正直しんどかった。このレベルの修正が頻繁に要求されるのはしんどいし、0-indexedから1-indexedへの変更とか実にどうでもいい破壊的変更とかもあって、VueJSの変更方針には賛同しかねるし別の手段を考慮した方が良いのでは、という気持ちが高まりつつある。むかしはよかった。(老害