Vue.jsを0.12.1から1.0.3にアップデートした際にハマったこと

Here we go. Vue.js 1.0.0. https://t.co/ieUmKsNLa1

— Vue.js (@vuejs) October 27, 2015

ついにVue.jsがメジャーアップデート！1系統がリリースされましたね！
おめでとうございます。

このアップデートに便乗し、会社で利用しているVue.jsのバージョンを0.12.1から1.0.3にアップデートしました。 その時にハマったことをメモ。

この記事では細かいハマりポイントしか書かないので、0.12 -> 1.0.0に関す大きな変更に関してはこちらを先に読んでみてください。

github.com

デバッグ方法

下記の方法でVue.jsのdebugモードを有効にしておけばスタックトレースが追えるので多少ハマってもなんとかなります。

Vue.config.debug = true;

同じイベントハンドラに複数のメソッドを渡す

before

 <div v-on="click: method1, click: method2(param)"></div>

after

<!-- OK -->
 <div @click="[method1(), method2(param)]"></div>

<!-- NG -->
 <div @click="[method1, method2(param)]"></div>

@clickまではアップデートの概要に書いてあるのですが、複数メソッドを渡す方法はぱっと見つかりませんでした。どうやら上の書式のように配列形式で渡すようです。
また、method1は実行演算子をつけないとクリック時に実行されません。

$dataはdeprecatedしている

before

vm.$data.items = ["りんご", "みかん", "バナナ"];

after

vm.items = ["りんご", "みかん", "バナナ"];

初期化時にdata内のitemsを初期化してなかった為に$data経由でitemsにアクセスしていたのですが、$dataが廃止になったため$dataを利用したbeforeのコードが残っている場合はエラーになります。必ず初期化しましょう　

2015/11/02 追記
すいません、なんかめっちゃ勘違いしてました。というか他のバグに引きづられていました。
deprecateしておらず使えましたorz

$addは$setに変更

before

vm.$data.$add('items', ["りんご", "みかん", "バナナ"]);

after

vm.$set('items', ["りんご", "みかん", "バナナ"]);

$data.$addはvm直下の$setに変更されています。vm直下に変更されているためvm.$data.$setとやるとundefinedエラーです。

componentのオプションinheritはdeprecated

before

  var myVM = Vue.extend({
    template: '#tpl',
    inherit: true, // ここ
    methods: {
       this.parentMethod(); // 親のメソッド
    }
  });

after

  var myVM = Vue.extend({
    template: '#tpl',
    props: ['items'],
    methods: {
       this.$dipatch('event-name');
    }
  });

inheritオプションをtrueにした場合、何も考えずに親のmodelやmethodにthis経由でアクセスできたのですが、ver.1.0.0よりpropsを設定したデータの受け渡しが必須になりました。
メソッドに関しても親のメソッドを直接呼ぶよりもイベントで通知し合ったほうがいいと思われます。

component(html側)にデータを受け渡す時の書式変更

before

<v-item items="{{items}}"></v-item>

after

<v-item :items="items"></v-item>

beforeのまま値を渡すと'{ { i t e m s } }'とstringがわたってしまいます。あたらしいbindingの書式で書きましょう。

$removeが参照を受け付けるようになった

before

var idx = items.indexOf(item);
vm.items.$remove(idx);

after

vm.items.$remove(item);

itemsという配列で$removeを使う場合、以前は配列のindex番号を渡してやる必要がありました。
しかし、1.0.0からは直接参照を渡して削除することが可能になっています。

v-componentはdeprecated

before

<tbody v-component="v-items" items="{{items}}"></tbody>

after

<tbody is="v-items" :items="items"></tbody>

tbodyやtrの様にhtmlの挿入位置に制約があるタグに関しては、いままでv-componetディレクティブを利用してcomponentとして扱わなければなりませんでした。しかし、ver.1.0.0からはv-isというディレクティブを利用しなくてはなりません。

まとめ

大雑把に更新変更を読んでの対応だったのでちょくちょくハマり、調べなおしに時間がかかりましたが全体的には楽に移行できたと思います。
@や:といったディレクティブのショートハンドがいい感じでしたし、親子関係のやりとりもprops経由のみという制限がついたおかげでよりコンポーネントとしてしっかり考える契機になるところが良いなと感じています。

今のところ、Vue.jsを使っているおかげで開発がかなり楽になっているので継続してアップデートしていって欲しいところです。

(๑˃̵ᴗ˂̵)و ｵﾗｯｵﾗｯ

参考

某友人の記事 lealog.hateblo.jp

ありがたや。

20151202 追記 はてぶのコメントで気づいたけど、deprecatedの綴り間違ってたので修正orz

関連書籍

Practical Vue.js: Reactive Components for Modern Web Interfaces (English Edition)