フロントエンド開発面接筆記試験問題 2023 年収集と奨励 (継続的に更新)
1. Vue の v-if と v-show は何のためにありますか? 2 つの違いは何ですか?
回答: どちらも切り替えに使用されますが、両者の違いは消費量にあり、v-if は切り替え時に消費量が多くなりますが、v-show は初期化時にのみ消費量が多くなりますので、シナリオに応じて選択してください。
2. CSS を現在のコンポーネントでのみ機能させるにはどうすればよいですか?
回答: 現在のスタイルの後にスコープを追加します。たとえば、スタイルスコープを追加します。
3. 双方向バインディングと双方向バインディングの原理を実装する方法は?
回答: v-model は双方向バインディングの文法糖衣であり、フォームとコンポーネント間の双方向データ バインディングによく使用されます。
原則: 2 つのステップで、v-bind は value 属性の v-on コマンドをバインドして、入力イベントを現在の要素にバインドします。v-model がフォームにバインドされると、v-model は実際には v-bind であることがわかります。 binding value と v -on は、入力イベントの組み合わせをリッスンします。
4. vue-loader とは何ですか? 用途は何ですか?
回答: .vue ファイルを解析し、template/js/style を js モジュールに変換するローダー。
目的: js は es6 を書くことができ、スタイルは scss 以下にすることができ、テンプレートは jade を追加することができます。
5. NextTick は何をしますか?
回答: $nextTick は、次の DOM 更新サイクルが終了した後の遅延コールバックです。データを変更した後に $nextTick を使用すると、コールバックで更新された DOM を取得できます。
シナリオ: ビューが更新された後、新しいビューに基づいて操作する必要があります。
6. キープアライブとは何ですか?
回答: keep-alive は vue の組み込みコンポーネントであり、現在のページの状態をフロントエンド、つまりキャッシュに保持する必要があります。有効化と無効化の 2 つのフック機能に対応し、コンポーネントが有効化されると有効化されたフック機能がトリガーされ、コンポーネントが削除されると無効化されたフック機能がトリガーされます。
7. キーの機能は何ですか?
回答: キーは一意の識別子であり、主な機能は仮想 DOM を効率的に更新することです。キー値は繰り返すことができないことに注意してください。！！
8. watch と computed の違い
回答: どちらもデータ モニターですが、違いは watch がより多くのパフォーマンスを消費することであり、これは Vue のパフォーマンスの最適化に反するため、使用しないようにしてください。計算とは、データが変更されたときに、対応するデータを変更します。古いデータによって引き起こされた新しいデータの変更は、キャッシュ メカニズムを使用してデータをキャッシュします。依存するドキュメントが変更された場合にのみ、対応する変更が行われます。
9. vue コンポーネント間で値を渡すにはどうすればよいですか?
答え：
父から息子へ
<!--父组件-->
<Header :msg='msg'></Header>
<!--子组件-->
props:['msg']
props:{
msg: 数据类型
}
子传父
<!--子组件-->
this.$emit("自定义事件名称"，要传的数据)；
<!--父组件-->
<Header @childInput='getVal'></Header>
methods:{
getVal(msg){
//msg就是子组件传过来的数据
}
}
兄弟コンポーネントのパス値
<!--兄弟组件传值-->
通过一个中转bus
A传值：
import bus from '@/common/bus'
bus.$emit("toFooter",this.msg);
B接收：
import bus from '@/common/bus'
bus.$on('toFooter',(data)=>{
//data就是this.msg
})
10. vue プロジェクトの各フォルダーの役割
答え:
main.js エントリー ファイル
router.js フロントエンド ルーティング設定ファイル
store.js vuex 設定ファイル
app.vue ルート コンポーネント
ビュー ルーティング コンポーネント コンポーネント ルーティング
コンポーネント アセットに導入されたその他の
コンポーネントvue ファイルの相対パスを使用してインポートされたリソース ファイル内にあります
11. アクシオスとは何ですか? 使い方？それを使用してログイン機能を実装するプロセスについて説明してください。
回答: バックグラウンド リソースを要求するモジュール。npm install axios -S がインストールされている
場合、送信はクロスドメインになります。これは構成ファイル config/index.js で設定する必要があります。
背景がTp5の場合、リソースルートを定義します。js で import を使用してから、
.get または .post を使用します。成功した場合は .then 関数に戻り、
失敗した場合は .catch 関数に戻ります。
12. Vue のクロスドメイン リクエスト インターフェイス プロキシ メソッド
回答: config/index.js で設定し
、サービス
axios.get("/api/xxx")を再起動します。
13. vue のライフサイクルは 4 つのステージと 8 つのフック関数があります。
回答: vue のライフサイクルは 4 つのステージに分かれています
。 最初のステージ (作成ステージ): beforeCreate、作成済み
第 2 ステージ (マウントステージ): beforeMount (レンダリング)、
マウント 3 フェーズ (更新フェーズ): beforeUpdate、更新
フェーズ 4 (破壊フェーズ): beforeDestroy、破壊
14. vue のライフサイクルについての理解について詳しく教えてください。
回答: 作成前と後、マウント前と後、更新前と後、破棄前と後、破棄前と破棄の 8 つの段階があります 作成前と後: 作成前、vue インスタンスの el とデータは未定義
ですそして初期化されていません。作成フェーズでは、データ data はありますが、el はまだありません。
マウント前/後: マウント前に vue インスタンスの el と data は初期化されますが、マウント前の仮想 dom ノードのままであり、data.message は置き換えられていません。マウント段階では、インスタンスがマウントされ、data.message が正常にレンダリングされます
更新前/後: データが変更されると、これら 2 つのメソッドがトリガーされます 破棄
/前後: destroy メソッドが実行された後、変更がトリガーされますデータは再度トリガーされません。 定期関数。この時点で vue インスタンスがイベントの監視と dom とのバインディングを解放しましたが、dom 構造はまだ存在していることを示します。
15. シングルページアプリケーションの長所と短所は何ですか?
回答:
利点:
1. 優れたユーザー エクスペリエンス、高速な速度、コンテンツ変更のためにページ全体を更新する必要がなく、サーバーへの負担が少ない
2. フロントエンドとバックエンドの開発が分離されている
3. ページ効果がよりクールです (これはデメリット
:
1. SEO にならない
2. ナビゲーションが利用できないため、進む・戻るを自分で実現する必要がある
3. 初期読み込みが多く、遅い
4. ページが比較的複雑
16. ルーティング ジャンプ方法
答え:
<router-link to="home"> router-link タグは < a > タグとしてレンダリングされます。これは tamplate 内のジャンプでも同じです。もう 1 つはナビゲーションであり、また
、 router.push("home") などの js を介してジャンプする
ps:
js ジャンプはプロジェクトで最も一般的に使用されるタイプですが、ルートにジャンプするときにパラメータを渡す必要がある場合は注意する必要があります。渡されたパラメータを URL の後ろに結合します。！
17. $router と $route の違い
答え:
ルーターはルートジャンプを開始するために使用され、
ルートはパラメーターを接続するときに使用されます。
18. vue-router にはどのような種類のナビゲーション フックがありますか?
回答:
1. グローバル フック
2. 単一ルート専用
3. コンポーネント
19. vuexを理解していますか?
回答: vuex は一種の状態管理であり、すべてのコンポーネントの状態を一元的に保存し、グローバル ウェアハウスとみなすことができます。
Vuex には 5 つの属性があります: 状態ゲッター突然変異アクション モジュール
20. MVVMフレームワークとは何ですか?
回答: M はモデル データ モデルを表し、V はビュー ビューを表し、VM はデータ モデルとビューの組み合わせを表します。
21. インターフェースリクエストは通常どのライフサイクルに置かれますか?
回答: インターフェイス リクエストは通常、マウントされた場所に配置されますが、サーバー側でレンダリングする場合、マウントされたリクエストはサポートされていないため、作成された場所に配置する必要があることに注意してください。
22. diff アルゴリズムのプロセスを簡単に説明します。
回答: diff アルゴリズムを実行するには、patch 関数を呼び出して古いノードと新しいノードを比較し、実際の DOM に継続的にパッチを適用します。patch 関数は、それぞれ新しいノードと古いノードを表す 2 つのパラメーター vnode と oldVnode を受け取ります。このときsameVnode(oldVnode, vnode)を使用し、trueが返ってきたらpatchVnodeを実行し、falseが返ってきたらvnodeをoldVnodeに置き換え、新しいノードを古いノードに置き換えます。
23. vue はなぜ非同期レンダリングなのでしょうか?
回答: 非同期更新が使用されていない場合、データが更新されるたびに現在のコンポーネントが再レンダリングされます。パフォーマンスの問題を考慮して、Vue は現在のデータ更新ラウンドの後にビューを非同期的に更新します。
24. vue の命令の使用法
答え:
v-html html
v-text 要素はコンテンツを表示します。
v-bind:data は動的データ データをバインドします。
v-on:click イベントをバインドします。 @click
v-for はリストをレンダリングし、データ サイクルに従って生成します。
v-if および v-show を使用して
v-model の双方向データ バインディングを非表示および表示するタグの構造は、フォームに使用されます。
25. vue ページレベルのコンポーネント間で値を渡しますか?
回答:
1. ページ ジャンプに vue-router を使用し、パラメータを渡します
2. ローカルの localstorge を使用します
3. vuex データ管理を使用して値を渡します
26. Vue のどの配列メソッドが配列を直接変更してビューを更新できるか
回答:
Push() はコレクションに要素を追加し、新しい長さを返します。
Pop() はコレクションから最後の要素を削除し、
この要素の値シフトを返します ( ) コレクションから最初の要素を削除し、その要素の値を返します。
unshift() コレクションの先頭に 1 つ以上の要素を追加し、新しい長さを返します。
splice() 既存の要素を削除または置換するか、その場で追加します 新しい要素が使用されます配列を変更し、変更された内容を配列の形式で返します。sort
() はソートに使用され、デフォルトでは各文字の Unicode ビットに従ってソートされます。reverse
() は元の配列を逆順にソートします。
27. 最初の画面を最適化するのはなぜですか? 実行する方法？
回答: 最初の画面表示時間の速さは、Web サイトに対するユーザーの認識に直接影響します。したがって、最初の画面表示時間の長さは、ユーザーの滞留時間の長さとユーザーのコンバージョン率にとって特に重要です。
css モジュラーロードでは、対応するモジュールの下の css が js または jsonp リクエストに渡されて、
遅延実行のために js に戻ります。インタラクションがある場合にのみ、
画像は他の画面 (最初の画面ではなく) で遅延読み込みモードで実行されます。 ）、トラフィックを節約できるだけでなく、リクエストの数や遅延したリクエストの数も減らすことができます。
サーバー側:
(1) 少数の静的ファイル、画像、アイコンフォントのドメイン名はすべて同じドメインの下に配置され、DNS 解決イベントを減らし、ドメイン名の収束を達成するのが最善です。
(2) モジュラーインターフェースのサポート。
(3) 最初の画面のコンテンツは静的キャッシュを行うのが最善です
(4) vue に対して ssr を実行して反応します
28. vue で一般的に使用される修飾子
答え:
.stop - イベントのバブリングを無効にするために、event.stopPropagation() を呼び出します。Prevent
- イベントのデフォルトの動作を防ぐために、event.preventDefault() を呼び出します
。capture - イベント リスナーを追加するときに使用します。capture mode.self
—— リスナーがバインドされている要素自体からイベントがトリガーされた場合にのみコールバックをトリガーします。native
—— コンポーネントのルート要素のネイティブ イベントをリッスンします。once
—— コールバックを 1 回だけトリガーします
。number ——文字列を入力します。 数値に変換します。trim
- スペースをフィルタリングします。
29. v-on は複数のメソッドを監視できますか?
回答: v-on は複数のメソッドをリッスンできますが、vue-cli プロジェクトは同じイベント タイプのメソッドに対してエラーを報告します。
30. ページが点滅する問題を解決する方法
答え: v-cloak を使用する
31. コンポーネントのレンダリングと更新のプロセスについて説明します。
回答:
vue コンポーネントの初期レンダリング プロセス:
テンプレートをレンダリング関数として解析して
応答をトリガーし、データ属性のゲッターとセッターを監視して
レンダリング関数を実行し、vnode を生成します。 patch(elem,vnode)
vue コンポーネント更新プロセス:
データを変更し、(以前は getter で監視されていた) セッターをトリガーして
レンダリング関数を再実行し、newVnode を生成し、patch(vnode, newVnode)
32. ミックスインとは何ですか?
回答: コンポーネントに共通するロジックや構成を抽出し、コンポーネントを使用する必要がある場合は、抽出した部分をコンポーネントに混ぜ込むだけです。これにより、コードの冗長性が軽減されるだけでなく、後のメンテナンスも容易になります。
ここで注意が必要なのは、抽出されるのはロジックや設定であり、HTMLコードやCSSコードではないということです。実際、考えを変えることもできます。Mixin はコンポーネント内のコンポーネントです。Vue のコンポーネント化により、コードがより再利用可能になります。コンポーネント間に重複部分が存在します。それを再度抽出するために Mixin を使用します。
33. Mixin と Vuex の違いは何ですか?
回答:
Vuex パブリック状態管理では、Vuex 内の特定のデータがコンポーネント内で変更されると、Vuex 内のデータを参照する他のすべてのコンポーネントもそれに応じて変更されます。
Mixin のデータとメソッドは独立しており、使用後にコンポーネントが相互に影響を与えることはありません。