Posted at

Vue.js の新機能をみていこう(2

More than 1 year has passed since last update.

前回の続きです。

Vue.jsの2系の更新内容を見ていきます。


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の内容でもやっていきましょうか。