一般的なVue.jsの落とし穴

getdocs

2年前

他のフレームワークと同様に、 Vue にはいくつかの奇妙な点があり、初心者が慣れるのに少し時間がかかる可能性があり、多くの人がつまずきます。ここでは、それらのいくつかと、それらを操作する方法および/またはそれらを回避する方法をリストします。

インストールと構築

Webpack

Vueは*「プログレッシブ」*Webフレームワークとしてよく引用され、必要な部分だけを少しずつ使用できるようにしますが、完全なアプリケーションを作成する場合は、適切なビルドシステムが必要になります。 Vueコミュニティで最も一般的に使用されるのは、Webpackです。

Webpackは初めての人には理解しにくいことが多いことを認識し、Vueは vue-cli を提供して、最初からアプリで機能するスキャフォールドを準備できるようにします。これを多くの記事で使用して、共通の基盤を確立しています。

バージョン（1.xと2.x）

Angular1とAngular2とは異なり、Vueの2つのメジャーリリースは、内部で多くのことを変更していますが、非常によく似た使用法を持っています。何を探すべきかわからない場合、コンポーネントがVue1用に作成されているのかVue2用に作成されているのかわからないほどです。これは、Vue1用にコンパイルされた分散ファイルがVue2で機能しないため、問題になる可能性があります。その逆も同様です。

コンポーネントが作成されたバージョンのいくつかの兆候は次のとおりです。

コンポーネントにはready（）（Vue 1）または Mounted（）（Vue 2）メソッドがありますか？
コンポーネントはv-bind.sync= 属性を使用しますか？それらはVue1のみです。
フィルターは口ひげの表現（ {{}} ）の外で使用されていますか？（すなわち。 @click="thing() | debounce 200"）それはVue2で削除されました。
partials はどこかで定義または使用されていますか？（Vue 1）
render（）関数がありますか？仮想DOM（したがって、 render メソッド）がVue2に追加されました。
$broadcastと$dispatch はどこでも使用されていますか？それらは、グローバルイベントバスの代わりにVue 2で削除され、提供/注入されました。
v-for （index、item）または（key、val）（Vue 1）またはその逆（Vue 2）の引数の順序はありますか？

これらの小さな違いの利点は、コンポーネントをVue1からVue2に移植するのが非常に簡単なことです。

反応性

Vueの反応性システムは素晴らしいですが、すべてを処理できるわけではありません。 Vueが検出できないエッジケースがいくつかあります。（まだ。うまくいけば、ES6プロキシが広くサポートされると、これらの警告はなくなります。）

プロパティがオブジェクトに追加またはオブジェクトから削除されると、Vueはそれを認識せず、プロパティをリアクティブにしません。
ルートデータオブジェクトに新しいプロパティを直接追加することはできませんが、 Vue.set（this.data、’propname’、value）を使用できます。
Vueは、 array [index] = value を介して配列を直接設定することにより、配列内の特定のインデックス値がいつ変更されたかを検出できません。回避策は、 Vue.set（array、index、value）を使用することです。
Vueは、配列の長さがいつ変更されたかを検出できません。代わりにスプライスを使用してください。

プラグイン

モジュールシステムを使用する場合は、使用する前に必ず Vue.use（plugins）を実行してください。そうしないと、何が悪かったのか頭を悩ませる可能性があります。どういうわけか、多くの人がこれに問題を抱えているようです。

テンプレート

v-キーなしの場合

keyバインディングのないオブジェクトの配列でv-forを使用すると、配列が変更されたときに非常に奇妙なレンダリングが発生する可能性があります。これは、Vueがkeyバインディングなしで変更されたオブジェクトを識別する方法を知らないためです。これに対する解決策は、：key =“ obj.prop” を使用して、オブジェクトの一意のプロパティにバインドすることです。（これは、実際には、Vueの最近のバージョンで必要です。）