よくある初心者の落とし穴

Feb 6, 2016

Vue.js 初心者からたびたび聞かれる数種類の質問があります。ガイド内でその全てに言及していますが、それらは見落としやすく、落とし穴にはまった時に見つけ出すのは大変です。そこで本記事では、それらの落とし穴についてまとめて紹介します。うまくいけば無駄な時間を節約できるでしょう!

DOM が更新されない。どうして?

ほとんどの場合は、Vue インスタンスのデータが変更されると同時に view が更新されます。しかし、2 つの稀なケースがあります:

  1. data 監視時に、存在しない新たなプロパティを追加した場合 view は更新されません。ES5 の制限とブラウザ間で一貫性のある動作を確保するために、Vue.js はプロパティの追加/削除を検出することはできません。ベストプラクティスは前もってリアクティブにする必要があるプロパティを常に宣言します。あなたが実行時にプロパティを追加または削除する必要がある場合は、グローバルな Vue.set または Vue.delete メソッドを使用します。

  2. 直接インデックス(例: arr[0] = val) を設定、または length プロパティを変更することによって配列を変更する場合 view は更新されません。同様に、Vue.js はこれらの変更を検出することはできません。常に配列のインスタンスメソッドを使用することによって配列を変更、またはそれを完全に置き換えて下さい。Vue は arr.splice(index, 1, value) のシンタックスシュガーとして、便利なメソッド arr.$set(index, value) を提供します。

参考文献: リアクティブの探求配列の変化を検出

いつ DOM が更新されますか?

Vue.js はまとめて DOM を更新するために非同期キューを使用します。これはあなたがいくつかのデータを変更するとき、DOM の更新は瞬時に発生しないことを意味します。それらはキューがフラッシュされたとき非同期に適用されます。では、DOM が更新されたことをどうやって知ればよいでしょうか?データを変更後、Vue.nextTick を使用するのが正解です。キューがフラッシュされた後、渡されたコールバック関数が一度だけ呼ばれます。

参考文献: 非同期更新キュー

なぜ data は関数として必要なのですか?

基本的な例では、data は直接プレーンなオブジェクトとして宣言しています。これは、new Vue() によって単一のインスタンスだけが作成されるためです。しかしながら、コンポーネントを定義するときは、data は初期データオブジェクトを返す関数として宣言されなければなりません。なぜでしょうか?同じ定義を使用して作成された多くのインスタンスがあるからです。まだ data に対してプレーンなオブジェクトを使用している場合、同じオブジェクトが作成された全てのインスタンス全体を横断して参照によって共有されます!data 関数を提供することによって、新しいインスタンスが作成される度に、単にそれは初期データの新しいコピーを返すための関数として呼び出すことができます。

参考文献: コンポーネントオプションの注意事項

HTML は小文字・大文字を区別しない

全ての Vue.js テンプレートは有効で、解析可能な HTML マークアップ、そして Vue.js はそのテンプレートを処理するために仕様に準拠するパーサーに依存しています。しかしながら、標準で指定された、HTML はタグと属性名がマッチする小文字・大文字を区別しません。これは :myProp="123" のようなキャメルケース属性は:myprop="123"としてマッチされます。経験則として、JavaScript ではキャメルケースを使用し、テンプレートでは、ケバブケースを使用すべきです。例えば、myProp として JavaScript で定義する prop は :my-prop としてテンプレートでバウンドされるべきです。

参考文献: キャメルケース 対 ケバブケース

小文字、大文字を区別しない作法において props そして コンポーネントを解決することによって、この矛盾を解消する可能性を議論しています。ここの会話に参加しましょう。