Vue 1.x からの移行
目次
- 強制プロパティのパラメータ cache: false
- v-bind true/ false 値
- v-on を使用してネイティブ イベントをリッスンする
- ##カスタム手順##Transition
- トランジションパラメータ
- ##テキストの外側にフィルターを挿入
- 計算された補間
- ## vm.$set
- ##vm.$delete
- ##Array.prototype.$set
- Array.prototype .$remove
vm.$data# を置き換えます
- ##vm.$get
##DOM 周りのインスタンス メソッド - ##Vue.config.unsafeDelimiters
- #Vue.elementDirective
そうではないということをお伝えできることをとてもうれしく思います。 API とコアコンセプトのほぼ 90% は変更されていません。このセクションには多くの詳細と多くの移行例が含まれているため、少し長くなります。心配しないでください。このセクションを最初から最後まで読む必要はありません。
プロジェクトの移行はどこから始めればよいですか?1. まず、現在のプロジェクトで 移行ツールを実行します。私たちは、高度な Vue アップグレード プロセスをシンプルなコマンド ライン ツールを使用して簡素化するよう細心の注意を払ってきました。ツールがレガシー機能を識別すると、詳細情報へのリンクとともに通知し、推奨事項を作成します。
2. 次に、このページのサイドバーにリストされているコンテンツを参照します。一部のタイトルがプロジェクトに影響を与えているにもかかわらず、移行ツールでプロンプトが表示されない場合は、プロジェクトを確認してください。
3. プロジェクトにテスト コードがある場合は、それを実行して、どこでまだ失敗するかを確認します。テスト コードがない場合は、ブラウザでアプリケーションを開いて移動し、エラーや警告に注意してください。
4. これでアプリケーションは完全に移行されました。さらに詳しく知りたい場合は、このページの残りの部分を読むことも、はじめにセクションの最初から始めて、新しいドキュメントと改善されたガイダンスを詳しく理解することもできます。核となる概念のいくつかはすでに理解されているため、多くのセクションは省略されています。
Vue 1.x バージョンのアプリケーションを 2.0 に移行するのにどれくらい時間がかかりますか?
これはいくつかの要因によって異なります:
アプリケーションの規模に応じて (小規模および中規模のアプリケーションは基本的に 1 つで実行できます)日） 。
気が散って 2.0 の最もクールな新機能を何回始めるかによって異なります。
いつ起こるかわかりませんが、2.0 アプリケーションを構築するときにこれがよく起こります。
どの古い機能を使用しているかによって異なります。ほとんどは検索と置換によってアップグレードできますが、一部には時間がかかる場合があります。ベスト プラクティスに従わない場合、Vue 2.0 は最善を尽くしてベスト プラクティスに従うように強制します。これはプロジェクトの長期的には良いことですが、大規模なリファクタリングが必要になる可能性もあります (ただし、リファクタリングが必要な部分の一部は廃止される可能性があります)。
Vue 2 にアップグレードする場合、Vuex と Vue Router も同時にアップグレードする必要がありますか?
Vue Router 2 のみが Vue 2 と互換性があるため、Vue Router をアップグレードする必要があり、これを処理するには Vue Router の移行方法 に従う必要があります。幸いなことに、ほとんどのアプリケーションにはルーター関連のコードがそれほど多くないため、移行にはおそらく 1 時間以上かかりません。
Vuex の場合、バージョン 0.8 は Vue 2 との互換性を維持しているため、一部の部分は強制的にアップグレードする必要はありません。今アップグレードする唯一の理由は、モジュールや削減されたボイラープレートなど、Vuex 2 の新しい高度な機能を利用したい場合です。 ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃テンプレート＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ ##フラグメント インスタンス
削除
各コンポーネントにはルート要素が 1 つだけ必要です。次のようなテンプレートがある場合、フラグメント インスタンスは許可されなくなりました:
<p>foo</p> <p>bar</p>次のように、単純にコンテンツ全体を新しい要素にラップすることをお勧めします:<div> <p>foo</p> <p>bar</p> </div>アップグレード方法
エンドツーエンド テスト スイート (エンドツーエンド テスト スイート) を実行するか、その後アプリケーションを実行します。アップグレードを実行し、コンソール警告を確認して、テンプレート内に複数のルート要素がある場所を特定します。
#ライフサイクルフック関数
フック関数を使用します。
##コンパイル前削除
#を使用します代わりに ##created
コンパイル済み
replace代わりに mounted フック関数を使用してください。アップグレード方法
添付
削除他のフック関数に組み込まれている DOM チェック メソッドを使用します。たとえば、次のように置き換えます:attached: function () { doSomething() }は次のように使用できます:mounted: function () { this.$nextTick(function () { doSomething() }) }アップグレード メソッド
切り離されました
削除されましたDOM チェック メソッドを他のフック関数で使用します。たとえば、次のように置き換えます:detached: function () { doSomething() }は次のように使用できます:destroyed: function () { this.$nextTick(function () { doSomething() }) }アップグレード メソッド
コード ベース内 移行ツールを実行して、このフック関数を使用するすべての例を検索します。
beforeCreate
##init#名前の変更 代わりに新しいフック関数を使用してください。基本的に beforeCreate は init とまったく同じです。 init は、他のライフサイクル メソッドの名前と一致するように名前が変更されました。
##準備完了
mounted
交換代わりに、新しい mounted フック関数を使用してください。を使用しても、フック関数で this.$el がドキュメント内に存在することが保証されないことに注意してください。
アップグレード方法Vue.nextTick/vm.$nextTickもこの目的のために導入する必要があります。例:mounted: function () { this.$nextTick(function () { // 代码保证 this.$el 在 document 中 }) }##v-for
v-for
forEach
配列を走査するときのパラメータの順序 Changeindex が含まれる場合、配列を走査するときのパラメーターの順序は (index, value)
でした。 JavaScript のネイティブ配列メソッド (や
mapなど) との一貫性を保つために、(value,index)になりました。アップグレード方法コード ベースで 移行ツールを実行して、どのファイルが古いパラメータ シーケンスの例。インデックス パラメーターに通常とは異なる名前 (position や
numなど) を付けた場合、移行ツールはそれらをマークアウトしないことに注意してください。
(名前, 値)
#v-for## オブジェクトをトラバースするときのパラメーターの順序Changeプロパティ名/キーが含まれる場合、前のトラバーサル オブジェクトのパラメーターの順序はになります。一般的なオブジェクト反復子 (lodash など) との一貫性を保つために、
(value, name)になりました。アップグレード方法コード ベースで
移行ツールを実行して、どのファイルが古いパラメータ シーケンスの例。主要パラメータに通常とは異なる名前 (name や
propertyなど) を付けた場合、移行ツールはそれらをマークアウトしないことに注意してください。
#$index
とおよび$key 削除されました2 つの暗黙的な宣言 $index$key
が削除されました 変数は明示的に削除されましたv-forで定義されています。これにより、Vue 開発の経験があまりない開発者でもコードを読みやすくなり、入れ子になったループを処理する際の動作もよりクリーンになります。アップグレード方法コード ベースで 移行ツール
を実行して、アップグレードに使用される変数を見つけます。これらの例を削除してください。見つからない場合は、コンソール エラー (たとえば、Uncaught ReferenceError: $index is not generated) で探すこともできます。
トラックバイ
v-bind
交換track-by は、または # を使用しない他のプロパティと同様に機能する
keyに置き換えられました。 ##:プレフィックスは文字列として扱われます。ほとんどの場合、静的キーを完全な式を使用した動的バインディングに置き換える必要があります。たとえば、<div v-for="item in items" track-by="id">を置き換えるには、次のように記述する必要があります:<div v-for="item in items" v-bind:key="item.id">アップグレード メソッド
コード ベース Migration Tool を実行して、track-by
を使用する例を見つけます。 これにはいくつかの利点があります:元のプロパティ値の操作権限を維持できます。
#twoWay
- 検証された値に別の名前を付けることで、開発者に明示的な宣言の使用を強制します。
- アップグレード方法
移行ツール
Prop パラメータMove Exceptプロップは一方向にのみ渡せるようになりました。親コンポーネントに逆の効果を与えるには、子コンポーネントは暗黙的な双方向バインディングに依存するのではなく、明示的にイベントを渡す必要があります。詳細については、次を参照してください。 #カスタム コンポーネント イベントを実行して、twoWay パラメータを含むインスタンスを見つけます。
##アップグレード方法
##v-bind## の .once と.syncModifiersRemovedProps は一方向のみに渡せるようになりました。親コンポーネントに逆の効果を与えるには、子コンポーネントは暗黙的な双方向バインディングに依存するのではなく、明示的にイベントを渡す必要があります。詳細については、次を参照してください。プロパティの変更
非推奨コンポーネント内のプロパティの変更これはアンチパターンです (推奨されません)。たとえば、最初にプロップを宣言し、次に this.myProp = 'someOtherValue' を通じてコンポーネント内のプロップの値を変更します。レンダリング メカニズムに従って、親コンポーネントが再レンダリングされると、子コンポーネントの内部 prop 値も上書きされます。
ほとんどの場合、prop 値の変更は次のオプションで置き換えることができます:データ属性を通じて、prop を使用してデータ属性のデフォルト値を設定します。 。
- 計算された属性を通じて。
- アップグレード方法
エンドツーエンド テストを実行し、 コントロールを表示します。プロップの変更に関するステーション警告メッセージ 。
ルート インスタンスのプロパティ
Replacementroot インスタンス (例: new Vue({ ... }) で作成されたインスタンス) の場合、props
の代わりにpropsData
のみを使用できます。アップグレード方法エンドツーエンド テストを実行すると、失敗したテストがポップアップ表示されます。使用するように通知します。 props
のルート インスタンスの有効期限が切れました。またはコンポーネント メソッドを使用します:
#計算されたプロパティ
##cache: false
例:非推奨Vue の将来のメジャー バージョンでは、キャッシュ計算されたプロパティの検証は削除されます。キャッシュされていない計算プロパティをメソッドに変換すると、以前と同じ結果が得られます。template: '<p>message: {{ timeMessage }}</p>', computed: { timeMessage: { cache: false, get: function () { return Date.now() + this.message } } }template: '<p>message: {{ getTimeMessage() }}</p>', methods: { getTimeMessage: function () { return Date.now() + this.message } }##アップグレード メソッド組み込みコマンド
#v-bind
、および
True/False 値 Change##2.0 で v-bind を使用する場合、 null、
unnamedfalse
のみが false とみなされます。これは、0と空の文字列が true 値としてレンダリングされることを意味します。たとえば、v-bind:draggable="''"はdraggable="true"としてレンダリングされます。列挙プロパティの場合、上記の false 値に加えて、文字列"false"もattr="false"としてレンダリングされます。他のフック関数 (
v-ifやv-showなど) については、true を判断するための js の一般ルールに従うことに注意してください。および false 値。
アップグレード方法アプリの一部が影響を受ける可能性がある場合は、エンドツーエンドのテストを実行してください。にアップグレードすると、失敗したテストがポップアップ表示されますv-onを使用してネイティブ イベントをリッスンします
Change
コンポーネントでv-on を使用すると、カスタム イベント ($emit## を使用してコンポーネントによってトリガーされるイベント) のみをリッスンするようになります。 ＃）。ルート要素のネイティブ イベントをリッスンする場合は、<my-component v-on:click.native="doSomething"></my-component>移行ツール
Upgrade メソッド# のような.native修飾子を使用できます。##コード ベースでを実行して、このフック関数を使用するすべての例を見つけます。このアプローチのもう 1 つの利点は次のとおりです。ラップされた関数は遅延時間に等しいため、長時間待機します。たとえば、検索の提案を行う場合、ユーザーが入力を停止するまで一定時間待機してから提案を行う必要があり、エクスペリエンスが非常に悪くなります。実際、現時点では
#デバウンスは、かつて Ajax リクエストやその他の高価なタスクの頻度を制御するために使用されていました。 Vue の
v-model削除## で debouncev-model
たとえば、検索プロンプトを設計するときの制限:のdebounce属性パラメータを使用すると、いくつかの単純なケースでこの制御を非常に簡単に実現できます。しかし実際には、これは時間のかかるタスク自体を制御するためではなく、ステータス更新の頻度を制御するためです。これは小さな違いですが、アプリケーションが成長するにつれて制限されます。
debounce
パラメーターを使用すると、「入力中のステータス」を観察できません。 「。」入力状態をリアルタイムに検出できないためです。ただし、debounceを Vue から切り離すことで、制御したい操作のみを遅らせることができるため、これらの制限を回避できます。<!-- 通过使用 lodash 或者其它库的 debounce 函数， 我们相信 debounce 实现是一流的， 并且可以随处使用它，不仅仅是在模板中。 --> <script src="https://cdn.jsdelivr.net/lodash/4.13.1/lodash.js"></script> <div id="debounce-search-demo"> <input v-model="searchQuery" placeholder="Type something"> <strong>{{ searchIndicator }}</strong> </div>new Vue({ el: '#debounce-search-demo', data: { searchQuery: '', searchQueryIsDirty: false, isCalculating: false }, computed: { searchIndicator: function () { if (this.isCalculating) { return '⟳ Fetching new results' } else if (this.searchQueryIsDirty) { return '... Typing' } else { return '✓ Done' } } }, watch: { searchQuery: function () { this.searchQueryIsDirty = true this.expensiveOperation() } }, methods: { // 这是 debounce 实现的地方。 expensiveOperation: _.debounce(function () { this.isCalculating = true setTimeout(function () { this.isCalculating = false this.searchQueryIsDirty = false }.bind(this), 1000) }, 500) } })throttling 関数を使用する方が適切です。 lodash などのライブラリを自由に使用できるようになったので、スロットルを使用してプロジェクトを迅速にリファクタリングできます。
アップグレード パス
debounce パラメータを使用して 移行ツール
インスタンスを実行します。
v-model
パラメータと##lazyまたはnumberパラメーターを使用 # 。Replacementlazynumber
パラメータが修飾子として使用されるようになり、より明確に見えますが、このようにはなりません:<input v-model="name" lazy> <input v-model="age" type="number" number>次のように記述されています:<input v-model.lazy="name"> <input v-model.number="age" type="number">アップグレード方法移行ツールの実行 これらの非推奨のパラメータを見つけてください。
v-modelインラインvalue を使用して # を削除します##v-model
これは、次の要素が含まれていることを意味します:は、初期値インラインvalueを初期化しなくなりました。明らかに、インスタンスのデータの対応する属性が実際の初期値として使用されます。<input v-model="text" value="foo">データ オプションに次の要素がある:data: { text: 'bar' }は、モデルを 'foo' ではなく 'bar' としてレンダリングします。同様に、<textarea>
の既存の値の場合:<textarea v-model="text"> hello world </textarea>は、text
であることを確認する必要があります。の初期値が "hello world"アップグレード方法
アップグレード後にエンドツーエンド テストを実行し、v-model に関する
コンソールの警告に注意してください。インラインパラメータ
##v-model## with v-for 反復されたプリミティブ値Remove次のように書くと機能しません:<input v-for="str in strings" v-model="str">< ;input>
は次のような js コードにコンパイルされるためです:
v-modelこのようにして、strings.map(function (str) { return createElement('input', ...) })の双方向バインディングは次のようになります。ここでは無効です。
v-modelstrをイテレータ内の別の値に代入しても、これは関数内の単なる変数であるため、役に立ちません。別の方法は、オブジェクト配列を使用して、がオブジェクト内のフィールドを同期的に更新できるようにすることです。例:
アップグレード方法テストを実行します。アプリがこの更新の影響を受ける場合は、失敗したテストのプロンプトがポップアップ表示されます。
v-bind:style # を除く
!重要! importantでシフト##、次のような記述は無効になります:<p v-bind:style="{ color: myColor + ' !important' }">hello</p>他のを本当にカバーする必要がある場合は、次のようにするのが最善です。文字列形式。次のように記述します:
<p v-bind:style="'color: ' + myColor + ' !important'">hello</p>アップグレード メソッド
移行ヘルプ ツールを実行します。
! important
v-el
v-el## と v-refは # を置き換えます##簡単にするために、と
v-refv-refは 1 つのref属性に結合され、使用できます。コンポーネント内 この例では、$refsによって呼び出されます。これは、v-el:my-elementが次のように記述されることを意味します:ref="myElement",v-ref:my-componentは次のようになります:ref="myコンポーネント"。一般要素にバインドされている場合、refは DOM 要素を参照し、コンポーネントにバインドされている場合、refはコンポーネント インスタンスを参照します。は命令ではなく特別な属性であるため、動的に定義することもできます。これは、
v-elv-for:former<p v-for="item in items" v-bind:ref="'item' + item.id"></p>/
$refsv-refおよびv-for と組み合わせると便利です。を一緒に使用すると、各要素に特定の名前を付ける方法がないため、DOM 配列またはコンポーネントの配列が生成されます。これを実行して、すべての要素に同じref:1.x とは異なり、<p v-for="item in items" ref="items"></p>は応答しません。これは、これらが登録/更新中に行われるためです。レンダリング。変更をリッスンして繰り返しレンダリングするだけで応答性が高くなります。
$refs一方、デザインは主に js プログラムからアクセスするために提供されており、テンプレート内でこれに依存しすぎることはお勧めできません。これは、インスタンスの外部でインスタンスの状態にアクセスすることを意味し、Vue のデータ駆動型の考え方に反するためです。
アップグレード方法
移行ツールを実行インスタンス内の v-el# を確認します## と v-ref
。v-show
v-show
v の後に を使用します-elseRemovev-else はの後に使用できなくなります。代わりに、
アップグレード メソッドv-ifの否定分岐でv-showを使用してください。例:は次のように記述されます:<p v-if="foo">Foo</p> <p v-else v-show="bar">Not foo, but bar</p>Run移行ツールインスタンス内に存在する
v-elseと v-show を見つけます。
#カスタム手順簡素化
新しいバージョンでは、命令 範囲が大幅に縮小されました。現在、ディレクティブは低レベルの DOM 操作にのみ使用されます。ほとんどの場合、コードを再利用するための抽象化レイヤーとしてコンポーネントを使用することが最善です。 重要な変更点は次のとおりです:幸いなことに、新しいフックはよりシンプルで習得が簡単です。詳細については、
- 命令にはインスタンスがなくなりました。つまり、ディレクティブのフック関数にはインスタンスの
this
がなくなりました。代わりに、パラメータで必要なデータを受け入れることができます。本当に必要な場合は、elを介してインスタンスにアクセスできます。acceptStatement
と同様に、deep、priorityなどは非推奨になりました。双方向ディレクティブを置き換えるには、Example を参照してください。- 一部のフックの意味が以前とは異なり、フック関数がさらに 2 つあります。
カスタム手順ガイドを参照してください。
アップグレード方法
移行ツールを実行しますディレクティブが定義されている場所を確認します。これらの場所はリファクタリングが必要になる可能性があるため、ヘルパー ツールはこれらの場所をマークします。
#ディレクティブ.literal修飾子
削除.literal 修飾子が削除されました。同じ機能を得るには、文字列修飾子を値として指定するだけです。例、次のように変更します:
<p v-my-directive.literal="foo bar baz"></p>ただ:
<p v-my-directive="'foo bar baz'"></p>##アップグレード方法移行ツール
を実行して、インスタンス内で `.literal` 修飾子が使用されている場所を確認します。＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃遷移＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ ##transition
パラメータ Replacement
transition
Vue のトランジション システムが完全に変更されました。属性を使用する代わりに、要素を
<transition> および <transition-group> でラップすることで効果が得られるようになりました。詳細については、移行ガイドを参照してください。 アップグレード方法
移行ツールを実行します移行先の場所を見つけます属性が使用されます。
アップグレード方法#移行
移行ツールを実行します移行先の場所を見つけます 属性が使用されます。staggerパラメータ削除
#リストのレンダリングで段階的な遷移を使用したい場合は、要素のdata-index (または同様の属性) を設定することでタイミングを制御できます。 この例
を参照してください。
アップグレード方法
移行ツールを実行します移行先の場所を見つけます 属性が使用されます。アップグレード中に、新しい移行戦略に「移行」できます。 ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃イベント＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ ##events
オプション削除
オプションは非推奨になりました。イベント ハンドラーが
eventscreated
フックに登録されるようになりました。詳細な例を参照してください。$dispatch および $broadcast移行ガイドkeyCodes
Vue.directive('on').keyCodes##置換##新しい簡潔な構成方法は
を使用します。例:
Vue.config.keyCodes// v-on:keyup.f1 不可用 Vue.config.keyCodes.f1 = 112アップグレード方法移行ツールを実行します古い keyCode 構成を見つけます
$dispatch
##$発送## および $ブロードキャスト交換と
$dispatch$broadcastは非推奨になりました。より簡潔で明確なコンポーネント間通信と、Vuexなどのより優れた状態管理ソリューションを使用してください。 コンポーネント ツリー構造に基づくイベント フロー手法は非常に理解しにくく、コンポーネント構造が拡大するにつれてますます脆弱になるためです。このイベント メソッドは本当に良くありません。今後、開発者に多大な苦痛を与えたくありません。また、と
$dispatch$broadcastでは、兄弟コンポーネント間の通信の問題は解決されません。と
v-on$broadcastをアップグレードする最も簡単な方法は、イベント ハブを使用して、コンポーネント ツリー内のどのレベルにあるかに関係なく、コンポーネントが自由に通信できるようにすることです。 . . Vue インスタンスはイベント ディスパッチ インターフェイスを実装しているため、空の Vue インスタンスをインスタンス化することでこれを実現できます。これらのメソッドの最も一般的な用途の 1 つは、親子コンポーネントが相互に通信することです。このような場合、$emit
Listen を使用して、子コンポーネントで $emit への変更を確認できます。これにより、イベントの可視性を簡単に追加できます。 ただし、通信が親子コンポーネントの複数の層にまたがる場合、は役に立ちません。対照的に、一元化されたイベント ミドルウェアを使用すると、簡単にアップグレードできます。これにより、コンポーネントが兄弟であっても、コンポーネント間の通信が非常にスムーズになります。 Vue はイベント エミッター インターフェイスを通じてインスタンスを実行するため、実際には空の Vue インスタンスを使用できます。
たとえば、次のような ToDo アプリケーション構造があるとします:Todos ├─ NewTodoInput └─ Todo └─ DeleteTodoButton別のイベント センターを通じてコンポーネント間の通信を管理できます:
// 将在各处使用该事件中心 // 组件通过它来通信 var eventHub = new Vue()次に、コンポーネント内で、
$emit、
$dispatch$on、$offを使用して、リスニング イベントをそれぞれ配信、監視、キャンセルできます。この場合は、// NewTodoInput // ... methods: { addTodo: function () { eventHub.$emit('add-todo', { text: this.newTodoText }) this.newTodoText = '' } }// DeleteTodoButton // ... methods: { deleteTodo: function (id) { eventHub.$emit('delete-todo', id) } }// Todos // ... created: function () { eventHub.$on('add-todo', this.addTodo) eventHub.$on('delete-todo', this.deleteTodo) }, // 最好在组件销毁前 // 清除事件监听 beforeDestroy: function () { eventHub.$off('add-todo', this.addTodo) eventHub.$off('delete-todo', this.deleteTodo) }, methods: { addTodo: function (newTodo) { this.todos.push(newTodo) }, deleteTodo: function (todoId) { this.todos = this.todos.filter(function (todo) { return todo.id !== todoId }) } }と
$broadcastを置き換えることができますが、最も複雑な状況では、Vuex# のような専用の状態管理レイヤーを使用することをお勧めします。 ##。アップグレード方法実行 移行ツール
使用方法の確認$dispatch および $broadcast
のインスタンス。
#フィルター
フィルター挿入されたテキストの外側削除されました
現在、フィルターは挿入されたテキスト ({{ }}
つまり、ネイティブ JS で実装できるものについては、同じ問題に繰り返し対処するために新しいシンボルを導入することを避けるようにしています。 Vue の組み込みフィルターを置き換える方法は次のとおりです:タグ) 内でのみ使用できます。ディレクティブ (例:v-model、v-onなど) でフィルターを使用すると、事態がより複雑になることがわかりました。v-forのようなリスト フィルターの場合、テンプレート全体で再利用できるように、処理ロジックを計算されたプロパティとして js に配置するのが最善です。
Replace debounce
次のようには記述されなくなりましたこのFilter<input v-on:keyup="doStuff | debounce 500">methods: { doStuff: function () { // ... } }lodash の debounce
(またはおそらく throttle) を使用して、負荷の高いタスクを直接制御してください。上記の関数は次のように実現できます。<input v-on:keyup="doStuff">methods: { doStuff: _.debounce(function () { // ... }, 500) }この記述方法の利点については、「v-model
例」を参照してください。
limitBy
は次のように記述されなくなりました:フィルターを置き換えます<p v-for="item in items | limitBy 10">{{ item }}</p>計算された属性で js 組み込みメソッドを使用します:<p v-for="item in filteredItems">{{ item }}</p>computed: { filteredItems: function () { return this.items.slice(0, 10) } }## replace
filterByFilter
このようには書かれなくなりました:<p v-for="user in users | filterBy searchQuery in 'name'">{{ user.name }}</p>js 組み込みメソッド
.filterは、すべての js メソッドを計算プロパティで使用できるため、多くの複雑なフィルター操作を実装することもできます。たとえば、名前と電子メール アドレスを照合してユーザーを検索するには (大文字と小文字は区別されません):
var self = this self.users.filter(function (user) { var searchRegex = new RegExp(self.searchQuery, 'i') return user.isActive && ( searchRegex.test(user.name) || searchRegex.test(user.email) ) })
orderBy フィルター ## を置き換えます。
# 書く代わりに:<p v-for="user in users | orderBy 'name'">{{ user.name }}</p>代わりに、lodash の
orderBy(または、計算された属性 #sortBy## の
## を使用します)#):<p v-for="user in orderedUsers">{{ user.name }}</p>computed: { orderedUsers: function () { return _.orderBy(this.users, 'name') } }フィールドで並べ替えることもできます:アップグレード方法
移行ツールを実行しますディレクティブで使用されているフィルターを見つけます。見つからないものがある場合は、コンソール エラー メッセージ
を確認してください。
フィルター パラメーターの表記法変更点
フィルター パラメーター フォームの動作が改善されました。 js 関数の呼び出しは同じなので、パラメータをスペースで区切る必要はありません:
<p>{{ date | formatDate 'YY-MM-DD' timeZone }}</p>ここで括弧を使用し、カンマで区切ります:
<p>{{ date | formatDate('YY-MM-DD', timeZone) }}</p>#アップグレード方法
移行ツールを実行して古い呼び出しシンボルを見つけます。見つからない場合は、コンソール エラー メッセージを参照してください。 。
組み込みのテキスト フィルター削除されました
テキスト内に挿入されたフィルターは残りますが、動作しますが、内蔵フィルターがすべて削除されています。代わりに、各領域に特化したライブラリを使用することをお勧めします。 (たとえば、日付の書式設定には
date-fnsを使用し、通貨の書式設定にはaccountingを使用します)。各内蔵フィルターについて、交換方法を大まかにまとめました。コード例は、カスタム ヘルパー関数、メソッド、または計算プロパティで記述できます。
jsonフィルターを置き換えますVue によって自動的にフォーマットされるため、1 つずつ変更する必要はありません文字列、数値、配列、オブジェクトなど、何でも構いません。 jsの
JSON.stringify関数を使って実装したい場合は、メソッドや計算属性に記述することもできます。
置換
capitalizeフィルターtext[0].toUpperCase() + text.slice(1)
置換
大文字フィルターtext.toUpperCase()
置換
小文字フィルターtext.toLowerCase()
pluralizeフィルターを置き換えますNPM の pluralize ライブラリは、この機能を非常にうまく実現できます。特定の単語を複数形に書式設定したい場合、または特定の値 (「0」) に対して特定の出力を指定したい場合は、複数形書式設定フィルターを簡単にカスタマイズすることもできます:
function pluralizeKnife (count) { if (count === 0) { return 'no knives' } else if (count === 1) { return '1 knife' } else { return count + 'knives' } }
currencyフィルターの置き換え簡単な質問については、次のようにすることができます:
'$' + price.toFixed(2)ほとんどの場合、まだ存在します。奇妙な現象 (たとえば、
0.035.toFixed(2)は切り上げて0.04になりますが、0.045は切り捨てて0.04になります) 。これらの問題を解決するには、accountingライブラリを使用して、より信頼性の高い通貨形式を実現できます。アップグレード方法
移行ツールを実行破棄されたフィルターを見つけます。何かが不足している場合は、コンソール エラー メッセージを参照してください。
双方向フィルタ 交換品
一部のユーザーは喜んで
v を渡しました- model双方向フィルターを使用して、非常に少ないコードで興味深い入力を作成します。表面的には単純ですが、双方向フィルタは非常に複雑な部分を隠している可能性があり、ステータスの更新が遅くなり、ユーザー エクスペリエンスに影響を与えることさえあります。代わりに入力をラップするコンポーネントを使用することをお勧めします。これにより、より明示的で機能豊富な方法でカスタム入力を作成できるようになります。次に、デモンストレーションとして双方向の為替レート フィルターの移行を実行してみましょう:
基本的にはうまく機能しますが、ステータスの更新が遅れると問題が発生する可能性があります。の行動の奇妙さ。たとえば、
Resultタグをクリックし、入力ボックスの 1 つに9.999と入力してみます。入力ボックスがフォーカスを失うと、その値は$10.00に更新されます。しかし、計算機全体を見ると、保存されているデータが9.999であることがわかります。ユーザーに表示されるのは、もはや真の同期ではありません。より堅牢な Vue 2.0 ソリューションに移行するには、まずこのフィルターを新しい
<currency-input>コンポーネントでラップしましょう:
入力ボックスのフォーカスの内容の選択など、独立したフィルターではカプセル化できない動作を追加できます。次に、フィルターからビジネス ロジックを抽出します。次に、すべてを外部の
currencyValidatorオブジェクト に入れます。これにより、移行が容易になるだけでなく、よりモジュール性が高まります。 Vue 2 はより簡単ですが、レート ギャップやフォーマットも可能です。
#Vue コードから独立した単体テスト
Vue 2 の他の部分で使用します。 API の負荷の検証など、アプリケーションの終了
このバリデーターを抽出した後、それを更新することもできます。より堅牢なソリューションに安心して組み込むことができます。それらの奇妙な状態も排除され、ブラウザーのネイティブの数値入力ボックスと同じように、ユーザーがエラーを入力する可能性がなくなりました。
ただし、Vue 1.0 のフィルターにはまだ制限があるため、Vue 2.0 に完全にアップグレードすることをお勧めします。お気づきかもしれません:
入力ボックスのすべての側面がより明示的になり、ライフサイクル フックと DOM イベントを使用して双方向フィルターの隠れた動作を置き換えます。
カスタム入力ボックスで
v-modelを直接使用できるようになりました。これは、通常の入力ボックスで使用されるだけでなく、コンポーネントをVuex フレンドリーです。フィルター オプションに戻り値が必要ではなくなったため、為替レートの作業は実際には非同期で完了できます。これは、為替レートを処理するアプリケーションが多数ある場合、このロジックを簡単に改良して共有マイクロサービスにすることができることを意味します。
アップグレード方法
実行 移行ツール例で検索
v-modelディレクティブでのフィルターの使用例。これを怠ると、コマンド ライン エラーが発生するはずです。
##スロット
重複した名前を持つスロット削除
<slot>
同じテンプレート内の重複した名前非推奨。スロットがレンダリングされると、同じテンプレート内の他の場所で再度レンダリングすることはできません。同じコンテンツを別の場所にレンダリングしたい場合は、prop を使用してそれを渡すことができます。
アップグレード方法アップデート後にテストを実行し、
コンソールの警告メッセージを確認します同じ名前のヒント v-model。
#スロット
経由で挿入されたフラグメントは、スタイルパラメータ削除 という名前の <slot>slot
のパラメータを維持しなくなります。スタイルを制御するには、ラッピング要素を使用してください。または、より高度なアプローチを採用して、コンテンツをプログラムで変更します (レンダリング関数)。アップグレード方法実行移行ツール
選択スロット タグ CSS セレクターを見つけます (例:[slot="my-slot-name"])。
#特別な属性
keep-alive
##keep-alive属性 置換これは特別な属性ではなく、ラップされたコンポーネントであり、
< keep-alive><transition>に似ています。例:これは複数の状態を持つサブコンポーネントで使用できます<keep-alive> <component v-bind:is="view"></component> </keep-alive>:
に異なるサブコンポーネントが含まれている場合、各サブコンポーネントは個別に影響を受ける必要があります。最初のコンポーネントだけでなく、すべての子コンポーネントが無視されます。
と併用する場合は、必ずコンテンツをラップしてください:
#アップグレード メソッド
移行ツールを実行しますkeep-alive 属性を見つけます。
#補間の計算
削除されました
#アトリビュート内の計算された補間アトリビュート内の計算された補間は使用できなくなりました:
<button class="btn btn-{{ size }}"></button>
インライン式として記述する必要があります:<button v-bind:class="'btn btn-' + size"></button>または計算された属性:
<button v-bind:class="buttonClasses"></button>computed: { buttonClasses: function () { return 'btn btn-' + size } }アップグレード メソッド##HTML 計算された補間削除
HTML 計算補間 ({{{ foo }}}) は削除され、v-html
ディレクティブに置き換えられました。実行 移行ツール補間を計算するための HTML を見つけます。
単一バインディング置換
##単一バインディング({ {* foo }}
) は、新しいv-onceディレクティブに置き換えられました。アップグレード方法
実行移行ツール単一バインディングが使用されている場所を見つけます。 ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃応答＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃
##vm.$watch
変更
合格vm.$watch
によって作成されたオブザーバーは、コンポーネントのレンダリング時にアクティブ化されるようになります。これにより、不必要な更新を行わずに、コンポーネントがレンダリングされる前に状態を更新できます。たとえば、コンポーネントの props の変化を観察することで、コンポーネント自体の値を更新できます。コンポーネントの更新後に
テストを実行します。古いメソッドに依存するオブザーバーがある場合は、失敗したテストがポップアップ表示されます。vm.$watch を使用して DOM を操作していた場合は、updated ライフサイクル フックを使用してこれを行うことができるようになりました。メソッドのアップグレード
##vm.$setは、変更
vm.$set
Vue.setの単なるエイリアスです。
エイリアスになりました。#アップグレード方法実行 移行ツール古い使用法を見つける
アップグレード方法実行移行ツール廃止された使用方法を見つける
Array.prototype.$set 非推奨
Vue.setを使用してください代替方法アップグレード方法
移行ツールを実行アレイ上で
を見つけます.$set。不足しているものがある場合は、コンソール エラー メッセージを参照してください。
Array.prototype.splice
Array.prototype.$remove# # Removeに置き換えます (例:
またはより良い方法として、直接削除します)。インデックス パラメータ:methods: { removeTodo: function (todo) { var index = this.todos.indexOf(todo) this.todos.splice(index, 1) } }methods: { removeTodo: function (index) { this.todos.splice(index, 1) } }アップグレード メソッド実行
移行ツール配列 # で # を見つけます#.$削除。不足しているものがある場合は、コンソール エラー メッセージ
を参照してください。 Vue インスタンスのVue.set
および Vue.delete
Vue.deleteVue.set とはインスタンスで機能しなくなります。すべてのトップレベルの応答値をインスタンスのデータ オプションで宣言することが必須になりました。インスタンス属性またはインスタンス
アップグレード方法$dataの値を削除する場合は、それをnullに設定するだけです。置換移行ツールを実行しますインスタンス内で
Vue.set## を見つけます# またはVue.delete。不足しているものがある場合は、コンソール エラー メッセージ
を参照してください。vm.$data
削除
アップグレード方法
インスタンス $data の置き換えは禁止されました。これにより、応答システムが一部のエッジ ケースから保護され、コンポーネントの状態がより制御可能になり、予測可能になります (特に型チェックのあるシステムの場合)。実行 移行ツールカバレッジの検索 vm.$data の位置。不足しているものがある場合は、
コンソール警告メッセージ
vm.$get##remove応答データは直接取得できます。アップグレード方法移行ツールを実行
#vm.$getの場所を検索します。 。不足しているものがある場合は、コンソール エラー メッセージを参照してください。
#DOM 周りのインスタンス メソッド
#vm.$appendTo
削除##DOM ネイティブ メソッドを使用します:myElement.appendChild(vm.$el)
アップグレード メソッド
例外を移動
移行ツールDOM ネイティブ メソッドを使用します:#アップグレード メソッドRunmyElement.parentNode.insertBefore(vm.$el, myElement)vm.$before例外を移動
移行ツールを実行します
DOM ネイティブ メソッドを使用します:アップグレード方法myElement.parentNode.insertBefore(vm.$el, myElement.nextSibling)myElement が最後のノードの場合は、次のように記述することもできます:myElement.parentNode.appendChild(vm.$el)#vm.$after
の場所を見つけます。何か不足している場合は、コンソール エラー メッセージ
を参照してください。
vm.$remove#removeDOM ネイティブ メソッドを使用する:vm.$el.remove()アップグレード メソッド実行
移行ツールfindvm.$remove。何か不足している場合は、
コンソール エラー メッセージを参照してください。#基礎となるインスタンス メソッド
vm.$eval
を参照してください。削除同じくらいできる限り使用しないでください。この機能を使用する必要があり、使用方法がわからない場合は、フォーラムアップグレード方法実行 移行ツール
vm.$eval## を見つけて使用します# の位置。不足しているものがある場合は、コンソール エラー メッセージを参照してください。
vm.$interpolate
shift 試してみる## 以外は使用しないでください。この機能を使用する必要があり、使用方法がわからない場合は、フォーラムを参照してください。
引っ越し
vm.$logに加えて、Vue Devtools を使用して最高のデバッグ エクスペリエンスを体験してください。 アップグレード方法を見つけます。何かが不足している場合は、コンソールのエラー メッセージを参照してください。
#インスタンス DOM オプション
replace: false
##replace: falseRemove
これで、コンポーネントは常にバインドされている要素。の動作を模倣するには、置換される要素
と同様の要素でルート コンポーネントをラップするか、レンダリング関数new Vue({ el: '#app', template: '<div id="app"> ... </div>' })new Vue({ el: '#app', render: function (h) { h('div', { attrs: { id: 'app', } }, /* ... */) } })# を使用します。#グローバル構成
##Vue.config.debug
実行
削除#デフォルトで警告メッセージがスタックメッセージに出力されるため、必要なくなりました。 アップグレード方法
## 削除されました見つけて使用
#非同期操作には、レンダリング パフォーマンスのサポートが必要になりました。アップグレード方法実行移行ツールVue.config.async# ＃ ＃ 実例。
テンプレート オプション
Vue.config.delimiters# ＃ ＃ 実例。。これにより、カスタム区切り文字を使用するときにサードパーティのテンプレートに影響を与えることがなくなります。アップグレード方法実行移行ツール見つけて使用
は
Vue.config.unsafeDelimiters削除#HTML 補間v-html に置き換えられます。
アップグレード方法
移行ツールを実行して、Vue.config.unsafeDelimiters#を見つけます。 ＃＃。次に、ヘルパー ツールは HTML 挿入のインスタンスも検索し、`v-html` に置き換えることができます。
グローバル API
##Vue.extendwithel
removeel オプションはありません次に、それを Vue.extend
で使用します。インスタンス作成パラメータでのみ使用できます。アップグレード方法
アップデート後にテストを実行し、コンソールの警告メッセージで # に関する問題を確認します。 ##Vue.extend
のel。
Vue.elementDirective
アップグレード方法
削除代わりにコンポーネントを使用する実行移行ツール Vue.elementDirective を含むインスタンスを見つけます。
通常のコンポーネント
##Vue.partial##削除 Partial は削除され、コンポーネント間のより明示的なデータ フロー (props) に置き換えられました。部分的にパフォーマンスが重要な領域を使用している場合を除き、代わりにを使用することをお勧めします。パーツ name を動的にバインドする場合は、
機能コンポーネントdynamicコンポーネントを使用できます。 アプリケーションのパフォーマンスが重要な部分でパーシャルを使用する場合は、にアップグレードする必要があります。これらは純粋な JS/JSX ファイル (.vue ファイルではない) 内に存在し、パーシャルと同様にステートレスかつインスタンスレスである必要があります。これにより、レンダリングが非常に高速になります。
部分コンポーネントに対する関数コンポーネントの利点の 1 つは、JavaScript の全機能にアクセスできるため、より動的になれることです。ただし、これにはコストがかかります。レンダリングされたコンポーネント フレームワークを使用したことがない場合は、学習するのにさらに時間がかかる可能性があります。アップグレード方法実行
移行ツール
