読めばわかるVueの8つのヒント

1. v-forでは常に:keyを使用する

データを操作する必要があるときにプログラムを一定かつ予測可能に保つには、v-for ディレクティブで key 属性を使用する必要があります。このようにして、Vue はコンポーネントの状態を追跡し、さまざまな要素への一定の参照を保持できます。アニメーションや Vue トランジションを使用するときにキーがない場合、Vue は DOM を可能な限り効率的にしようとします。これにより、v-for 内の要素が順序どおりに表示されなかったり、予期しない動作をしたりする可能性があります。各要素に一意のキー参照があれば、Vue アプリケーションが DOM 操作をどのように処理するかをより正確に予測できます。

2. プロパティを宣言するにはキャメルケースを使用し、テンプレート内のプロパティにアクセスするにはハイフンを使用します。

ベストプラクティスは、各言語の規則に従うことです。 JS では、キャメルケース宣言が標準であり、HTML ではハイフンです。 Vue はすでに camelCase 宣言と dashCase 宣言間の変換を提供しているため、実際に宣言する以外は何も心配する必要はありません。

3. イベント名にハイフンを使用する

カスタム イベントを発行する場合、親コンポーネントでは同じ構文を使用してイベントをリッスンするため、名前にハイフンを使用するのが最適です。したがって、コンポーネント間の一貫性を確保し、コードを読みやすくするために、両方の場所でハイフンを使用するようにしてください。

4. 機能コンポーネント

機能コンポーネントはステートレスであり、インスタンス化できず、ライフサイクルやメソッドもありません。機能コンポーネントの作成も非常に簡単です。テンプレートに機能宣言を追加するだけです。一般的に、外部データの変更のみに依存するコンポーネントに適しています。軽量であるため、レンダリングのパフォーマンスも向上します。コンポーネントに必要なものはすべてコンテキスト パラメータを介して渡されます。これはコンテキスト オブジェクトです。特定のプロパティについてはドキュメントを参照してください。ここで props は、バインドされたすべてのプロパティを含むオブジェクトです。

5. 同じルートのコンポーネントを再利用する

開発者は、複数のルートが同じ Vue コンポーネントに解決される状況に頻繁に遭遇します。問題は、Vue ではパフォーマンス上の理由から、デフォルトでは共有コンポーネントが再レンダリングされず、同じコンポーネントを使用するルートを切り替えようとしても何も変わらないことです。これらのコンポーネントを再レンダリングしたい場合は、router-view コンポーネントに :key プロパティを指定して再レンダリングできます。

6. $createElement

一般に、各 Vue インスタンスは $createElement メソッドにアクセスして仮想ノードを作成し、返します。たとえば、これを利用して、v-html ディレクティブを介して渡すことができるメソッドでマークアップを使用できます。関数コンポーネントでは、このメソッドはレンダリング関数の最初の引数としてアクセスできます。

7. JSXを使用する

Vue CLI 3 はデフォルトで JSX の使用をサポートしているため、JSX を使用してコードを記述できるようになりました。まだ Vue CLI 3 を使用していない場合は、babel-plugin-transform-vue-jsx を使用して JSX サポートを取得できます。

8. スコープ付きスロットはUIとビジネスロジックを分離する

多くの場合、コンポーネントのビジネス ロジックを再利用したいが、コンポーネントの UI は使用したくない場合があります。スコープ スロットを使用して、UI とビジネス ロジックを分離できます。スコープ付きスロットの一般的な考え方は、DOM 構造を呼び出し元に決定させ、コンポーネント内のビジネス ロジックにのみ焦点を当てることです。最後に、データとイベントは :item = "item" を通じて親コンポーネントに渡され、処理と呼び出しが行われるため、UI とビジネス ロジックの分離が実現されます。レンダリング機能と組み合わせることで、レンダリングフリーコンポーネントの効果を実現できます。

以上が、読んでわかるVueの8つの小技の詳しい内容です。Vueのスキルについてさらに詳しく知りたい方は、123WORDPRESS.COMの関連記事もぜひご覧ください！