最近では、フロントエンドの面接の質問に注目して共有することができますし、説明が不十分であったり間違っていたりする場合は、修正して伝えることができます。
質問 1: Vue の応答原則
1. データ属性はゲッター、セッターに変換され、対応する依存関係が記録され、変更されると対応する依存関係が通知されます。
2. 各コンポーネント インスタンスには対応するウォッチャー インスタンスがあり、ウォッチャー インスタンスは対応するセッターに依存します。
3. データが変更されると、セッターが呼び出され、セッターが対応するウォッチャーに通知し、対応するウォッチャーがビューを更新します。
質問 2: v-model 双方向バインディングの原理は何ですか?
回答: v-model 双方向バインディングの原理は、主にデータ ハイジャックと vue パブリッシュ サブスクライバー モードを通じて実現されます。
主な理由は、双方向バインディングの実装が主に Object.defineProperty() に依存しているためです。この関数を通じて、すべてのプロパティがハイジャックされる可能性があります。dep では、データが変更されると、ウォッチャーに通知され、ウォッチャーが更新されます景色。
パブリッシュ購読者モード。たとえば、本を購入するために本屋に行きましたが、その本はなくなっていましたが、電話番号を残すことができ、本が到着するまで通知が届くまで待ちます。電話番号を残した顧客は、購読者、書店は本が入荷したら電話番号を予約します。冊子に載っている人に順次通知されます。これが出版社モードです。
質問 3: v-for でキーを追加する必要があるのはなぜですか
回答:v-forレンダリングされた要素リストを更新するときは、デフォルトの就地复用戦略が使用されます。リスト データが変更されると、キー値に従って値が変更されたかどうかが判断されます。変更された場合は項目が再レンダリングされ、そうでない場合は、項目が再レンダリングされます。 ; 前の要素が再利用されます。
https://www.jianshu.com/p/4bd5e745ce95 この記事はとても良いです
問題 3: 範囲外のテキストが省略されている
//单行显示
overflow : hidden;
text-overflow : elipsis;
write-space :nowrap;
width : 100px;
//多行显示
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;質問 4: vue コンピューターと時計の違い
答え：
計算されたプロパティは次のように計算されます。
1. キャッシュをサポートし、依存データが変更された場合にのみ計算が再計算されます。
2. 非同期はサポートされていません。計算結果に非同期操作がある場合は無効であり、データの変更を監視できません。
3.計算された属性値はデフォルトでキャッシュされ、計算された属性は応答性の依存関係に基づいてキャッシュされます。つまり、data で宣言されたデータに基づいて計算されます。
4. 属性が他の属性によって計算される場合、この属性は他の属性に依存し、多対 1 または 1 対 1 で計算されます。
5. 計算された属性値が関数の場合、デフォルトで get メソッドが使用されます。関数の戻り値は属性の属性値です。計算された属性には get メソッドと set メソッドがあり、データが変更されると、 set メソッドが呼び出されます。
リスニング プロパティ ウォッチ:
1. キャッシュはサポートされていないため、データ変更により対応する操作が直接トリガーされます。
2. ウォッチは非同期をサポートします。
3. 監視機能は 2 つのパラメータを受け取り、最初のパラメータは最新の値、2 番目のパラメータは入力前の値、そして 2 番目のパラメータは入力前の値です。
4. 属性が変更されると、対応する操作を 1 対多で実行する必要があります。
5. これには 2 つのメソッドがあります。
immediate: true
表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。
deep: true
当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。質問 5: vue のデータがオブジェクトではなく関数であるのはなぜですか
2 つのインスタンスが同じオブジェクトを参照している場合、一方のインスタンスのプロパティが変更されると、もう一方のインスタンスのプロパティも変更されます。2 つのインスタンスが独自のスコープを持つ場合にのみ、相互に干渉しません。これは JavaScript の特性によるもので、コンポーネント内ではデータはオブジェクトではなく関数の形で存在する必要があります。ビルド内のデータは関数として記述され、データは関数の戻り値の形式で定義されるため、コンポーネントが再利用されるたびに新しいデータが返されます。これは、各コンポーネント インスタンスが独自のプライベート データ スペースであり、混乱を引き起こすことなく維持するデータに対してのみ責任を負います。そして、オブジェクトの形式で単純に記述されます。つまり、すべてのコンポーネント インスタンスが同じデータを共有するため、1 つを変更するとすべてが変更されます。
質問 6: v-router ルーティングジャンプの方法
<router-link :to="{name: '路有名'}"></router-link>
<router-link :to="{path: '路有路径'}"></router-link>
2. query传参
this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})
// html 取参 $route.query.id
// script 取参 this.$route.query.id
3. params传参
this.$router.push({name:'home',params: {id:'1'}}) // 只能用 name
// 路由配置 path: "/home/:id" 或者 path: "/home:id" ,
// 不配置path ,第一次可请求,刷新页面id会消失
// 配置path,刷新页面id会保留
// html 取参 $route.params.id
// script 取参 this.$route.params.id
4. query和params区别
query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失質問 7: インライン要素とブロック要素とは何ですか、またその違いはどこにありますか
答え：
HTML ブロック要素は 1 行を占め、サイズを変更できます。マージンとパディングのプロパティを設定可能
HTML ブロック要素は 1 行も占有せず、サイズを制御できません。マージンとパディングの左右のプロパティのみを設定できます
質問 8: フロートをクリアする方法は何ですか?
フロートを除去する最も一般的に使用される 4 つの方法とその長所と 短所
質問 9: js を理解する方法
JS で this が指摘する問題を理解する方法 - Tutupipi - 博客园
質問 10: プリミティブ型と参照型の違いは何ですか
1. プリミティブ データ型には次のものがあります: Number.String. Boolean. Null. Undefine.
2. 参照データ型には次のものがあります: Object.
Array. 頻繁に使用されるデータに属します。参照データ型はヒープに保存されますが、ヒープは大きな領域を占有し、サイズは固定されていません。
4. 値を渡すさまざまな方法: 基本データ型は値によって渡され、基本データ型の値は変更できません。参照データ型: 参照によって渡され、参照型の値は変更できます。
5.1 数値(2)と数値(1)の違いは
基本データ型であり、数値(1)はパッケージ化オブジェクトの型です。
質問 11: オブジェクトのディープ クローンを作成する方法
質問 12: Promise は同期ですか、それとも非同期ですか?
promiss は同期ですが、then メソッドと catch メソッドは非同期
質問 13: イベント ループ
イベント ループ_Wangzai Little Fist I ブログ-CSDN ブログ_イベント ループ
イベント ループには
同期タスクが含まれます: メインスレッドで実行されます。
非同期タスク: タスクキューで実行されるようになりました (マクロタスクとマイクロタスクに分割)
マクロタスク:stript (コード全体)、setTimeOut、setInterval、I/O、UI インタラクション、setImmdiate
マイクロタスク: Promise の then、catch、finally、および process の nextTick はすべてマイクロタスクです
PromiseとnextTickが同時に存在する場合、先にnextTickを実行する
同期タスク > マイクロタスク > マクロタスク
質問14：泡立ちを防ぐにはどうすればよいですか？
イベントバブリング:
最も具体的な要素からそれほど具体的でない要素へ (裏返し)
サブ要素 (イベント ソース) のイベントがトリガーされると、イベントは包含関係に沿って上位レベルに順番に渡され、ルート要素 (ルート) がトリガーされるまで各レベルでイベントを認識できます。
方法 1: 対応する関数にevent.stopPropagation()を追加する
方法2:event.targetとevent.currentTargetが等しいかどうかを判断する
event.target: 実際にイベントをトリガーする要素を指します。
event.currentTarget: イベント リスナーにバインドされている要素 (イベント要素をトリガーする親要素) を参照します。
このとき両者は等しいと判断され、対応する処理関数が実行されますが、イベントが上位にバブルするとevent.currentTargetが上位要素となり、このとき両者が等しいと判断されます。等しくないため、応答処理ロジックは実行されません。
方法 3: event.preventDefault() イベント処理中、イベントのバブリングはブロックされませんが、デフォルトの動作はブロックされます (すべてのポップアップ ボックスを実行するだけで、実行はされません)ハイパーリンク ジャンプ)
質問 15: アロー関数と通常の関数の違い
アロー関数
1. パラメータが 1 つだけの場合は括弧を付ける必要はありません パラメータがない場合、または 2 つ以上の場合は括弧を付ける必要があります 2. return 文が 1 つだけの場合は、{ を省略できますreturn
を追加する場合、複数のステートメントを返す場合は、{} と return を追加する必要があります
3. アロー関数がオブジェクトを返す場合、オブジェクトの外側に括弧を追加する必要があります。
アロー関数の this 点と通常の関数の違い
1. 通常の関数の this 点:
呼び出し元を指します. 呼び出し元がない場合は、デフォルトでウィンドウを指します
2. 矢印の点function:
アロー関数が定義されているオブジェクトを指します。使用すると、
デフォルトで親の this を指します。
アロー関数と通常関数の違い
1. アロー関数は無名関数であり、通常関数は無名関数または名前付き関数のどちらも可能
2. アロー関数はコンストラクタとして使用できず、new キーワードは使用できません
3. アロー関数は、プロトタイプなし、つまり no プロトタイプ属性
4、call、apply、bind はアロー関数の this ポイントを変更できませんが、通常の関数の this ポイントは変更できます
5、アロー関数には引数オブジェクトがありません。外部関数がある場合、外部関数の引数は継承されますが、いいえ、外部関数はエラーを報告し、アロー関数はrestパラメータを使用します(形式は...rest)
。 7.アロー関数には、この原文への
独自の
リンクがありません: https://blog.csdn.net/weixin_42178670/article/details/123966265
この問題を指摘している実例については、こちらの記事でわかりやすく紹介されています
質問 15: NextTick の使用法と原則
1. nextTick は次の DOM 更新の更新を待つメソッドです
2. Vue には非同期更新戦略があり、データが変更された場合、Vue はすぐには DOM を更新しませんが、キューを開いてコンポーネント更新関数をキューに保存します。同じイベント ループで発生するすべてのデータ変更非同期バッチ更新になります。この戦略により、データの変更が DOM にすぐに反映されなくなります。この時点で、更新された DOM 状態を取得したい場合は、nextTick を使用する必要があります。
3. 開発中に、nextTick を使用する 2 つのシナリオがあります。
- DOMを作成して取得したい場合
- 応答データが変更された後の DOM の更新された状態 (希望するリストの更新された高さなど) を取得します。