回答はあくまで参考であり、理解は人それぞれ異なります。
記事ディレクトリ
1. イベント フローの原理について簡単に説明します
イベント フロー: (1) イベント フローは、
ページがイベントを受信する順序を指します;
(2) ページ内の要素はすべて同じイベントを持ち、これらの要素は互いに入れ子になっていると想定されます
。
要素のイベントが発生すると、他の要素がトリガーされます。概要: イベント フローは、ページからイベントを受信するシーケンスを記述します。すべてのイベントを
持つ、要素の 1 つをクリックすると、
現在クリックされている要素だけでなく、カスケードされた要素もトリガーされます。クリック
範囲内のすべての要素がイベントをトリガーします。イベント フローには 2 つのモードがあります:
(1) イベント バブリング: 子要素が最初にイベントをトリガーし、次に親要素がイベントを内側から外側にトリガーすることを意味します
(2) イベント キャプチャ: 親要素が最初にイベントをトリガーすることを意味します、次に子要素がイベントをトリガーします (外側から内側へ)イベントキャプチャとイベントバブリングは全く逆の動作です。！！
2. CSS を導入する方法は何通りありますか? link メソッドと @import メソッドの違いは何ですか?
- HTMLタグのstyle属性を利用する（インライン）
- スタイルタグを使用する(埋め込み)
- linkタグを使用して外部CSSファイルを導入します（リンク形式）
- @importを使用してCSSファイルを導入します（インポートタイプ）
linkメソッドと @import メソッドの違いは何ですか:
1. 所属の違い
@import は CSS が提供する構文ルールで、スタイルシートをインポートする機能のみを持ちますが、 link は HTML が提供するタグで、CSS ファイルを読み込むだけでなく、RSS や rel 接続属性などを定義することもできます。
2. ロード順序の違い
ページが読み込まれると、link タグで導入された CSS が同時に読み込まれますが、@import で導入された CSS はページの読み込み後に読み込まれます。
3. 互換性の違い
@import は CSS2.1 でのみ使用できる構文であるため、IE5 以降でのみ認識できます。リンク タグは HTML 要素であるため、互換性の問題はありません。
4. DOMの制御性の違い
JS を通じて DOM を操作し、リンク タグを挿入してスタイルを変更できます。DOM メソッドはドキュメントに基づいているため、@import を使用してスタイルを挿入することはできません。
3. CSS の水平方向および垂直方向のセンタリングの実装
1. 柔軟なレイアウトを使用する
{
ディスプレイ: フレックス;
コンテンツの位置揃え: 中央;
整列項目: 中央;}
2.絶対位置決め + 変換を使用する
{
位置: 絶対;
トップ: 50%;
左: 50%。
変換: 変換(-50%, -50%);
}3.絶対位置決め + マージンを使用する
{
位置: 絶対;
トップ: 0;
下: 0;
右: 0;
左: 0;
マージン:自動;
}
4. typeofとinstanceofの違い
typeof の戻り値は、変数のデータ型を記述するために使用される文字列です。
instanceof の戻り値はブール値で、変数がオブジェクトのインスタンスに属しているかどうかを判断するために使用されます。
typeof は通常、数値、ブール値、文字列、関数、オブジェクト、未定義の結果のみを返すことができます。
5. イベントプロキシとは何かとその利点
イベント プロキシ (イベント委任とも呼ばれます) イベント プロキシとは、平たく言えば、イベント (クリック、キーダウンなど) に応じて 1 つの要素の機能を別の要素に委任することです (例: 各子ノードではありません) 。イベント リスナーを個別に設定しますが、その代わりに親ノードに設定し、バブリング原則を使用して各子ノードを設定します。
アドバンテージ：
- ページ全体に必要なメモリを削減し、全体的なパフォーマンスを向上させます。
- 作業の重複を減らすための動的バインディング
6. window.onload と $(document).ready の違い
window.onload メソッドは、Web ページ内のすべての要素 (要素に関連するすべてのファイルを含む) がブラウザーに完全に読み込まれた後に実行されます。つまり、現時点では JavaScript は Web ページ内のどの要素にものみアクセスできます。
jQuery の $(document).ready() メソッドによって登録されたイベント ハンドラーは、DOM の準備が完全に完了したときに呼び出すことができます。DOM が準備できていれば動作するため、すべての画像リソースがダウンロードされるのを待つ必要はありません。
7. JSでの配列の重複排除方法
- .Array.from(new Set(arr)) を使用して重複を削除します
- インクルードを使用して重複を削除する
//includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。 let list = [ 8,6, 6, 7, 1, 2, 3, 4, 5, 6, 7, 8] let newList2 = [] list.forEach((item) => { // 空数组newList2 不包含item为false ,取反为true 执行数组添加操作 // 如果数组包含了 item为true 取反为false 不执行数组添加操作 if (!newList2.includes(item)) { newList2.push(item) } }) console.log('newList2', newList2);- マップを使用して重複を削除する
//map数据结构是es6中新出的语法，其本质也是键值对，只是其键不局限于普通对象的字符串 let list = [3, 4, 4, 5, 5, 6, 6, 7, 1, 2, 3, 4] let newList3 = []; let map = new Map() list.forEach((item) => { // 如果map.has指定的item不存在，那么就设置key和value 这个item就是当前map里面不存在的key,把这个item添加到新数组 // 如果下次出现重复的item，那么map.has(item等于ture 取反 !map.has(item) 不执行 if (!map.has(item)) { map.set(item,ture) newList3.push(item) } }) console.log('newList3', newList3);
8. Vue コンポーネントのライフサイクルを説明し、各サイクルの役割を簡単に説明します
beforeCreate : インスタンスはメモリ内に作成されたばかりです。データとメソッドはまだ初期化されていません。一部の組み込みライフサイクル関数のみが含まれています。 created : インスタンスはメモリ内に作成されています。この時点で、
データは
beforeMount : これは完了しました。テンプレートはコンパイルされましたが、まだインターフェイスにレンダリングされておらず、
マウントされていません : テンプレートはブラウザーにレンダリングされ、作成フェーズは終了し、実行フェーズに入ろうとしています。beforeUpdate : インターフェース内のデータはまだ古いですが、データは更新されており、ページとデータはまだ同期されていません
中間処理 (非ライフサイクル、習得しやすい抽象的な中間処理):
まず、データ内のデータ、メモリ内 新しい DOM がその中にレンダリングされ、新しい DOM ツリーが更新されると、実際のインターフェイスに再レンダリングされ、データ層 (モデル) からビュー層 (ビュー) への変換が実現されます
。 )
updated : ページが再レンダリングされ、ページ内のデータはデータと一致します。beforeDestroy : このメソッドが実行されると、Vue のライフサイクルは破棄段階に入りますが、インスタンス上のさまざまなデータはまだ利用可能です。
destroy : すべてのコンポーネントが破棄され、Vue インスタンスも破棄され、Vue 内のデータは利用できません。
9. Vue のデータはなぜ関数なのでしょうか?
Vueコンポーネントでdataオプションが関数である理由は、各コンポーネント インスタンスにデータの独立したコピーが確実に存在するようにするためです。コンポーネントが複数回使用される場合、各インスタンスはデータの同じコピーを共有するのではなく、独自のデータを持つ必要があります。
10. Vue での監視と計算の違い
1. computed は計算された属性であり、watchはモニタリング、データ内のデータ変更を監視します。
2. Computed はキャッシュをサポートしています。依存するプロパティの値が変更されると、計算されたプロパティが再計算されます。それ以外の場合は、キャッシュ内のプロパティ値が使用されます。watch はキャッシュをサポートしません。対応するプロパティが変更されると、応答が返されます。実行されます。
3. Computed は非同期操作をサポートしておらず、非同期操作がある場合のデータ変更を監視できませんが、watch は非同期操作をサポートします。
4. Computed は初めてロードされるときにリッスンしますが、watch はデフォルトで初めてロードされるときにリッスンしません。
5. computed 内の関数は return を呼び出す必要がありますが、watch は呼びません。
6. 使用シナリオ:
計算済み:ショッピング カートの商品決済など、1 つの属性が複数の属性の影響を受けます。
watch:検索データなど、1 つのデータが複数のデータに影響を与えます。
11. vue-router にはいくつかのルーティング モードがありますが、違いは何ですか?
ハッシュ: URL のハッシュ値をルートとして使用します。すべてのブラウザをサポートします。
履歴: HTML5 以降の履歴 API とサーバー構成
要約: すべての JavaScript 実行モードをサポートします。ブラウザ API がないことが判明した場合、ルーティングは自動的にこのモードに強制されます。
違い
ハッシュモード:
# 文字は URL パスに表示されます
ハッシュ値は HTTP リクエストには含まれず、フロントエンド ルーティングによって処理されるため、ハッシュ値が変更されてもページは更新されず、リクエストはサーバーに送信されません。
ハッシュ値の変更により hashchange イベントがトリガーされます
履歴モード:
アドレス全体が再ロードされ、履歴レコードを保存して簡単に転送および後退することができます。
HTML5 API (古いブラウザはサポートしていません) と HTTP サーバー設定を使用します。バックグラウンド設定がないと、ページが更新されると 404 が表示されます。
12. Vue コンポーネントでパラメータを渡すにはどのような方法がありますか? それぞれに適したコンポーネントはどれですか?
1. Props: 親コンポーネントで props 属性を定義することで、データを子コンポーネントに渡します。子コンポーネントは props 属性を通じてデータを受け取り、親は子に渡します。
2. $emit: 子コンポーネントでイベントをトリガーして、データを親コンポーネントに渡します。親コンポーネントは、子コンポーネントのイベントをリッスンすることによってデータを受信します。息子から父へ
3. Vuex 状態管理を介したデータ転送:祖先コンポーネントと子孫コンポーネントの両方が、Vuex を介してアプリケーションの状態を管理し、データ転送を実現できます。
4. イベント バスを介してデータを転送する: Vue インスタンスでイベント バスを作成し、兄弟コンポーネントでそれぞれイベントをトリガーしてリッスンして、データ転送を実現します。
5. 共通の親コンポーネントを通じてデータを渡す: 2 つの兄弟コンポーネントに共通の親コンポーネントがある場合、親コンポーネントでデータを定義し、それを props 属性を通じて 2 つの兄弟コンポーネントに渡すことができます。