前回の続きです。
Vue.jsの２系の更新内容を見ていきます。
v-modelの変更点
- lazyとnumberの記法がパラメータからモディファに変わりました
- <input v-model.lazy="text">
- trimモディファが追加されました。
- debounceパラメータは非推奨になりました。
- v-modelはテンプレートに書かれた値を無視し、Vueインスタンスのデータを初期値として使用します。
- 同様にテキストエリアも、テンプレートに書かれたテキストではなく、Vueインスタンスのデータを初期値として使用します。
- これはつまり、JavaScript側がテンプレート側の値を気にする必要がないということです。
- プリミティブ値の配列（strings)をv-forに渡し、その値（str）をバインドする場合、v-modelは機能しません。代わりにオブジェクトの配列（objs)をv-forに渡し、そのオブジェクトの属性（obj.str）をバインドしてください。
Props
- onceとsyncは非推奨になりました。データの反映は親から子への下方向のみです。親に変更を反映するにはイベントを発生させてください。
- 2.0においてPropsは不変だと考えてください。新しい描画メカニズムにより、ローカルでPropsを変更しても親のレンダリング時に上書きされるでしょう。代わりにデータプロパティか算出プロパティを使います。
keep-alive
- keep-aliveはコンポーネントになりました。<keep-alive>で囲んでください。
Slots
- 同じテンプレートに同じ名前のSlotは複数存在できません。
- すでに描画されたSlotはそれ以降無視されます。
- SlotでインサートされるコンポーネントはSlot属性を保持できません。
Refs
- v-refは属性になりました。
- <comp ref="foo">
- 動的バインディングもサポートされました
<comp :ref="dynamicRef">
- vm.\$els と vm.\$refsは統合されまれた。通常の要素上ではrefはDOM要素を、コンポーネント上ではコンポーネントを指します。
- vm.\$refsはレンダリング中に設定される値なので、値の変更は画面に反映されません（つまり、リアクティブではありません）。
- 基本的に\$refsはJavaScript内で使うためのものです。テンプレートでは使用しないほうがよいです。
Misc
- track-byはkeyに置き換わりました。属性と同じルールでバインディングされます。ただし、v-bind: または ：（コロン）は必要ありません。またリテラル文字列を与えてください。だいたいの場合、動的バインドを使用するので、以下のようになるでしょう。
- <div v-for="item in items" :key="item.id">
- 属性内の文字列置換は非推奨になりました。代わりに動的バインドを使用してください。
- バインディング時、null, undefined, flaseのみがfalseとして扱われ、0, 空文字はtrueになります。
- 列挙型の属性においてこれは次のような挙動を示します。
:draggable="''" => draggable="true"- さらに列挙型については文字列'false'もflaseとして扱われます。
- カスタムコンポーネントのv-onは、カスタムイベントのみに反応し、DOMのイベントは無視します。
- v-elseはv-showでは使えないので、否定演算子！を用いてください。
- ワンタイムバインディング{{ * foo }}は非推奨になりました。代わりにv-onceを使います。
- Array.\$set/\$removeも非推奨です。代わりにVue.set か Array.splitを使ってください。
- !importantは直書きの:styleでは使えません。
- ルートインスタンスはpropsではなくpropsDataを使います。
- elオプションはVue.extendでは使えなくなりました。インスタンス生成でのみ使えます。
- Vueインスタンス上ではVue.set/deleteは使えません。トップレベルのdataオプションを定義する際に使用します。
- コンポーネントインスタンスのルート\$dataは置き換えできません。
- vm.\$watchで作成したウォッチャーはコンポーネントの再描画前に呼び出されます。これにより無用な更新を避ける機会が与えられます。
- コンポーネントが更新された後にDOMを操作したいなら、lifecycleフックが使えます。
Tips
- \$dispatchと\$broadcastの非推奨について
- jQueryのようなEventEmitterを用意してるので代用してください。
- v = new Vue(); v.\$emit / .\$on / .\$off
- Arrayフィルターの非推奨について
- 算出属性で代用してください
やっぱり結構変わってますね。移行とか大丈夫なんですかね？
つぎはIntroductionの内容でもやっていきましょうか。