ホームページ >ウェブフロントエンド >jsチュートリアル >vue の面接の質問の概要 (回答付き)
この記事では、Vue の面接の質問 (回答付き) について紹介します。これには一定の参考価値があります。困っている友人は参考にしてください。お役に立てれば幸いです。
Vue はますます人気が高まっています。国内外に目を向けると、BATのような大企業からスタートアップ企業まで、Vueは幅広く活用されています。面接では、Vue 関連の技術原則もテストする必要があります。フロントエンド エンジニアにとって、Vue を習得することはオプションではなく、むしろ「必須コース」に近いものであると言えます。
Vue プロジェクトに取り組んでいる多くの人は、要素 ui やその他の UI フレームワークを直接使用しています。これらのフレームワークは効率の点で非常に役立ちますが、実際にはテクノロジーをまったく向上させません。面接官からの質問に Vue のコア テクノロジーについて答えてください。
開発者にとって、技術フレームワークの使用方法だけを知っていて、このフレームワークのコア テクノロジの背後にある実装原理や設計アイデアを全く理解していない場合、テクノロジの道を遠くまで進むことはできません。開発者として、私は非常に深い経験を持っています。ここで心温まるお勧めをしたいと思います。UI フレームワーク ant Design vue の作者は、Geek Time で UI フレームワークを立ち上げました。コースは Vue Development Practical と呼ばれています (記事の下部に購入リンクがあります)。私もこのコースを購入しましたが、講義が充実していると思います。Vue の技術的な原理と応用を習得するのに役立ち、その基礎となる原理も理解できます。実践的なプロジェクトを通じて、独立して学習できるようになります。 Vue のフロントエンド プロジェクトを担当します。この機能は、転職、面接、Vue の入門に非常に役立ちます。私を含む多くのバイヤーも、有益な情報が満載だと感じています。困っている人全員にお勧めします。
さて、本題に入りましょう。今日は、Vue に関する高度な面接の質問をいくつか紹介します。
1. MVVM とは何ですか?
回答: MVVM は Model-View-ViewModel の略語です。モデルはデータ モデルを表し、データ操作のビジネス ロジックを定義します。ビューはビュー レイヤーを表し、データ モデルをページにレンダリングする役割を果たします。 ViewModel は双方向バインディングによってバインドされており、DOM を手動で操作することなく View と Model が同期的に対話できるようにする設計思想です。
2. vue-router の動的ルーティングを定義するにはどうすればよいですか?渡された動的パラメータを取得するにはどうすればよいですか?
回答: ルーター ディレクトリの Index.js ファイルで、パス属性に /:id を追加します。ルーター オブジェクトの params.id を使用する
3. vue-router にはどのような種類のナビゲーション フックがありますか?
回答: 3 種類あり、1 つはグローバル ナビゲーション フック: router.beforeEach(to,from,next) で、その機能はジャンプする前に判断してインターセプトすることです。 2 番目のタイプ: コンポーネント内のフック、3 番目のタイプ: 排他的なコンポーネントの独立したルーティング
4. vuex とは何ですか?使い方?どの機能シナリオで使用されますか?
回答: vue フレームワークでの状態管理。 main.jsにstoreを導入して注入します。新しいディレクトリ ストアが作成され、エクスポートされます。シナリオには次のものが含まれます。 シングルページ アプリケーション内のコンポーネント間のステータス。音楽の再生、ログイン状態、ショッピングカートへの追加
5. MVVM と MVC の違いは何ですか?他のフレームワーク(jquery)とどう違うのですか?どのシナリオが適用されますか?
回答: MVVM と MVC は両方とも設計思想です。主なことは、MVC のコントローラーが ViewModel に進化することです。MVVM は主にノードを操作するのではなく、データを通じてビュー層を表示し、多数の DOM を解決しますMVC での操作。ページのレンダリングのパフォーマンスが低下し、読み込み速度が遅くなり、ユーザー エクスペリエンスに影響します。主に、大量のデータ操作を行うシナリオで使用されます。
シナリオ: データ操作が多いシナリオ、より便利
6. Vue 社の双方向データ バインディングの原理は何ですか?
回答: vue.js は、パブリッシャー/サブスクライバー モデルと組み合わせたデータ ハイジャックを使用します。Object.defineProperty() を使用して各プロパティのセッターとゲッターをハイジャックし、データが変更されたときにサブスクライバーにメッセージをパブリッシュします。対応するリスニング コールバック。
7. vue コンポーネントをカプセル化するプロセスを教えてください。
回答: まず第一に、コンポーネントはプロジェクト全体の開発効率を向上させることができます。コンポーネントはページを複数の比較的独立したモジュールに抽象化し、効率の低さ、メンテナンスの困難さ、再利用性といった従来のプロジェクト開発の問題を解決します。などの問題があります。
次に、Vue.extend メソッドを使用してコンポーネントを作成し、Vue.component メソッドを使用してコンポーネントを登録します。子コンポーネントにはデータが必要です。データは props で定義できます。子コンポーネントはデータを変更した後、そのデータを親コンポーネントに渡したいと考えます。起動メソッドを使用できます
8. Vue.js のテンプレートのコンパイルについての理解を話してください
回答: つまり、最初に AST ツリーに変換され、次にレンダリング関数は VNODE (Vue 社の仮想 DOM ノード) を返します。
詳細な手順:
まず、テンプレートを AST 構文ツリーにコンパイルします (抽象構文ツリーは、ソースの抽象構文構造のツリーです)コード) を通じてコンパイラ表現)、コンパイルは、コンパイラの作成に使用される createCompiler の戻り値です。オプションのマージを担当します。
次に、描画関数を取得するためのAST生成(AST構文木を描画関数文字列に変換する処理)を行います。描画関数の戻り値はVNodeです。VNodeは仮想DOMノードです。 (ラベル名、子ノード、テキストなど)
を含む Vue9.
回答: 動的コンポーネントをラップする場合、主にコンポーネントのステータスを保持するか、再レンダリングを回避するために、非アクティブなコンポーネント インスタンスがキャッシュされます;
使用法: 単純なページ
キャッシュ: <キープアライブ include= ''コンポーネント名''>
キャッシュしない:
10 Vue と React の違い
回答: 同様の点: どちらもコンポーネント化を促進し、「プロップ」の概念があり、独自の構築ツールを持っています。Reat と Vue にはフレームワークのスケルトンのみがあり、その他ルーティングや状態管理などの機能はフレームワークによって分離されたコンポーネントです。
相違点: React: 一方向データ フロー、構文 - JSX、React では状態を更新するために setState() メソッドを使用する必要があります。 Vue: データの双方向バインディング、構文 - HTML、状態オブジェクトは不要、データは Vue オブジェクト内で data 属性によって管理されます。小規模なアプリケーションには適していますが、大規模なアプリケーションには適していません。
11. v-show 命令と v-if 命令の類似点と相違点は何ですか?
v-show 命令は、displayCSS 属性を変更することで表示または非表示にします。要素。
v-if 命令は、DOM を直接破棄して再構築し、要素を表示および非表示にします。
12. $route と $router の違い
答え: $route は、パス、パラメータ、ハッシュ、クエリ、フルパス、一致、 name など ルーティング情報パラメータ。 $router は、ルーティング ジャンプ メソッド、フック関数などを含む「ルーティング インスタンス」オブジェクトです。
13. vue におけるキー値の役割
答え: Vue.js の使用 v-for がレンダリングされた要素のリストを更新するとき、デフォルトでは「インプレース再利用」戦略が使用されます。データ項目の順序が変更された場合、Vue はデータ項目の順序に一致するように DOM 要素を移動しません。単に各要素をそこで再利用し、特定のインデックスでレンダリングされた各要素が表示されるようにします。 key の主な機能は、仮想 DOM を効率的に更新することです
この記事はここで終了です。その他の興味深いコンテンツについては、PHP 中国語の JavaScript チュートリアル ビデオ 列に注目してください。 Webサイト!
関連する推奨事項:
《vue インタビューの質問 》、《 フロントエンド インタビューの質問 》
以上がvue の面接の質問の概要 (回答付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。