vuejs の面接でよくある 11 の質問、知っていますか? vue インタビューの質問 コラム
1. MVVM について理解していますか?
MVVM は Model-View-ViewModel の略です
Model はデータモデルを表し、データの変更や操作のためのビジネスロジックも Model 内に定義できます。
View は、データ モデルを UI 表示に変換する役割を担う UI コンポーネントを表します。
ViewModel は、モデル データの変更を監視し、ビューの動作を制御し、ユーザーの操作を処理します。簡単に理解すると、ビューとモデルを同期し、モデルとビューを接続するオブジェクトです。
MVVM アーキテクチャでは、View と Model の間に直接的な接続はありません。代わりに、ViewModel を通じて対話します。Model と ViewModel の間の対話は双方向であるため、View データの変更はモデルに同期され、データのモデル変更もすぐにビューに反映されます。
ViewModel は、双方向のデータ バインディングを通じてビュー レイヤーとモデル レイヤーを接続し、ビューとモデル間の同期は人間の介入なしで完全に自動的に行われるため、開発者はビジネス ロジックに集中するだけでよく、手動操作は必要ありません。データ状態の同期を意識する必要がなく、複雑なデータ状態の維持はMVVMによって完全に管理されます。
2. Vue のライフサイクル
beforeCreate(作成前)
データ観察と初期化イベントが開始される前
created(作成後)
完全なデータ観察、プロパティとメソッドの操作、初期化イベント、el 属性はまだ表示されていません
beforeMount (ロード前)
はマウントが開始される前に呼び出されます。関連するレンダリング関数が初めて呼び出されます。インスタンスは次の構成を完了しました: テンプレートをコンパイルし、データとテンプレート内のデータから HTML を生成します。現時点では HTML がページにマウントされていないことに注意してください。
mounted (ロード後)
el が新しく作成された vm.$el に置き換えられ、インスタンスにマウントされた後に呼び出されます。インスタンスは次の構成を完了しました。el 属性によって指定された DOM オブジェクトを、上記のコンパイルされた HTML コンテンツに置き換えます。テンプレート内の HTML の HTML ページへのレンダリングを完了します。このプロセス中に Ajax 対話が実行されます。
beforeUpdate (更新前)
データが更新される前、つまり仮想 DOM が再レンダリングされてパッチが適用される前に呼び出されます。追加の再レンダリング プロセスをトリガーせずに、このフックで状態をさらに変更できます。
updated
データ変更による仮想 DOM の再レンダリングとパッチ適用後に呼び出されます。呼び出されるとコンポーネント DOM が更新されているため、DOM に依存した操作を実行できます。ただし、ほとんどの場合、更新の無限ループが発生する可能性があるため、この期間中に状態を変更することは避けるべきです。このフックは、サーバー側のレンダリング中には呼び出されません。
beforeDestroy (破棄前)
インスタンスが破棄される前に呼び出されます。インスタンスは引き続き完全に利用可能です。
destroyed (破棄後)
インスタンスが破棄された後に呼び出されます。呼び出し後、すべてのイベント リスナーが削除され、すべての子インスタンスが破棄されます。このフックは、サーバー側のレンダリング中には呼び出されません。
1. vue のライフサイクルとは何ですか?
回答: Vue インスタンスの作成から破棄までのプロセスがライフサイクルです。作成開始からデータの初期化、テンプレートのコンパイル、Domのマウント→レンダリング、更新→レンダリング、破棄までの一連の処理をVueのライフサイクルと呼びます。
2.vue ライフサイクルの役割は何ですか?
回答: ライフサイクルには複数のイベント フックがあるため、Vue インスタンス全体のプロセスを制御するときに適切なロジックを簡単に作成できます。
3. vue のライフサイクルには何段階ありますか?
回答: 作成前/後、ロード前/後、更新前/後、破棄前/後、合計 8 つの段階に分けることができます。
4. ページが初めて読み込まれるときにどのフックがトリガーされますか?
回答: 次の beforeCreate、created、beforeMount、mount がトリガーされます。
5. DOM レンダリングはどのサイクルで完了しますか?
回答: DOM レンダリングはマウントされた状態で完了します。
3. 双方向データ バインディングを実装する Vue の原則: Object.defineProperty()
Vue は、主にパブリッシャー/サブスクライバー モデルと組み合わせたデータ ハイジャックを使用して双方向データ バインディングを実装します。 Object.defineProperty() を使用して、各プロパティのセッターとゲッターをハイジャックし、データが変更されたときにサブスクライバーにメッセージをパブリッシュし、対応するリスニング コールバックをトリガーします。プレーンな Javascript オブジェクトをデータ オプションとして Vue インスタンスに渡すと、Vue はそのプロパティを反復処理し、Object.defineProperty を使用してプロパティをゲッター/セッターに変換します。ゲッター/セッターはユーザーには表示されませんが、内部的には Vue が依存関係を追跡し、プロパティがアクセスされ変更されたときに変更を通知することができます。
Vue の双方向データ バインディングは、Observer、Compile、Watcher を統合するデータ バインディングの入り口として MVVM を使用します。Observer を使用して独自のモデルのデータ変更を監視し、Compile を使用してテンプレート命令を解析およびコンパイルします。 (vue は {{}} の解析に使用されます)、最後にウォッチャーを使用してオブザーバーとコンパイル間の通信ブリッジを構築し、データ変更 -> ビューの更新、ビューのインタラクティブな変更 (入力) -> データ モデルの変更の双方向バインディング効果を実現します。 。
<p>
<input>
</p><p></p>
<script>
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
ログイン後にコピー
4. Vue コンポーネント間のパラメータ転送
1. 親コンポーネントとサブコンポーネント間の値転送
親コンポーネントがサブコンポーネントに渡す: サブコンポーネントは props メソッドを通じてデータを受信します;
サブコンポーネント 親コンポーネントに渡されます: $emit メソッドはパラメータを渡します
2. 親コンポーネントと子コンポーネントの間のデータ転送、兄弟コンポーネントは値を渡します
eventBus は転送ステーションに相当するイベント センターを作成します。 、イベントの転送とイベントの受信に使用できます。プロジェクトが比較的小さい場合は、これがより適切です。 (多くの人が VUEX を直接使用することを推奨していますが、それはニーズによって異なります。テクノロジーは単なる手段であり、目標を達成することが重要です。)
5. Vue のルーティング実装: ハッシュ モードとヒストリー モード
ハッシュ モード:
ブラウザでは、記号「#」、# および # 以降の文字をハッシュと呼び、window.location.hash; で読み取られます。
特徴: ハッシュはURL には含まれますが、HTTP リクエストには含まれません。ブラウザーのアクションをガイドするために使用されますが、サーバー側のセキュリティには役に立たず、ハッシュはページをリロードしません。
ハッシュ モードでは、http://www.xxx.com など、ハッシュ記号の前のコンテンツのみがリクエストに含まれます。したがって、バックエンドでは、ルーティングの完全なカバレッジが達成されない場合でも、A 404エラーが返されます。
history モード:
history は HTML5 の新機能を採用し、ブラウザ履歴スタックを変更するための PushState()、replaceState()、およびステータスを監視するための PopState イベントという 2 つの新しいメソッドを提供します。変化します。
履歴モードでは、フロントエンドの URL は、バックエンドへのリクエストを実際に開始する URL (http://www.xxx.com/items/id など) と一致している必要があります。バックエンドに /items/id のルーティング処理がない場合、404 エラーが返されます。 Vue-Router の公式 Web サイトでは、次のように説明されています。「ただし、このモードで適切に動作するには、バックグラウンド構成サポートも必要です...したがって、すべての状況をカバーする候補リソースをサーバー側に追加する必要があります。 URL がどの静的リソースにも一致しません。その場合、アプリが依存するページである同じindex.htmlページが返されるはずです。」
6. vue routingのフック関数
読み取りのみに使用されるステータスはストア Medium に集中します。状態を変更する方法は、同期的なものであるミューテーションを送信することです。非同期ロジックはアクションにカプセル化する必要があります。
store を main.js に導入し、注入します。新しいディレクトリ ストアが作成され、エクスポートされます。
シナリオには以下が含まれます: シングルページ アプリケーションでは、コンポーネント間の状態、音楽再生、ログイン ステータス、ショッピング カートへの追加
state
Vuex は単一の状態ツリーを使用します。つまり、各アプリケーションにはストア インスタンスが 1 つだけ含まれますが、単一の状態ツリーはモジュール性と競合しません。保存されたデータのステータスを直接変更することはできません。
mutations
ミューテーションによって定義されたメソッドは、Vuex ストア内の状態またはデータを動的に変更します。
getter
vue に似た計算プロパティは、主に一部のデータをフィルターするために使用されます。
アクション
アクションとは、ミューテーションにおけるデータの処理方法を非同期にデータを処理できる方法に変更することと理解でき、簡単に言うとデータの非同期操作です。ビュー層は、store.dispath を通じてアクションを配布します。
モジュール
プロジェクトが特に複雑な場合、各モジュールに独自の状態、ミューテーション、アクション、ゲッターを含めることができるため、構造が非常に明確になり、管理が容易になります。
//store实例
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})ログイン後にコピー
7. vue-cli にカスタム命令を追加するにはどうすればよいですか?
1. ローカル命令の作成
var app = new Vue({
el: '#app',
data: {
},
// 创建指令(可以多个)
directives: {
// 指令名称
dir1: {
inserted(el) {
// 指令中第一个参数是当前使用指令的DOM
console.log(el);
// 对DOM进行操作
el.style.width = '200px';
el.style.height = '200px';
el.style.background = '#000';
}
}
}
})ログイン後にコピー
2. グローバル命令
Vue.directive('dir2', {
inserted(el) {
console.log(el);
}
})ログイン後にコピー
3. 命令の使用
<p>
</p><p></p>
<p></p>
ログイン後にコピー
8. Vue でフィルターをカスタマイズする方法?
html コード:
<p>
<input>
{{msg| capitalize }}
</p>ログイン後にコピー
JS コード:
var vm=new Vue({
el:"#app",
data:{
msg:''
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
})ログイン後にコピー
グローバル定義フィルター
Vue.filter('capitalize', function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
})ログイン後にコピー
9. 一文で答えられる面接の質問
1.css は現在のコンポーネントでのみ機能します
回答: style タグにスコープを記述するだけです。例:
2.v -if と v-show の違い
答え: v-if は条件に従ってレンダリングされ、v-show は表示ブロックまたはなしです。
3.ルートとルーターの違い
回答: 
Router は、ルーティング ジャンプ メソッド、フック関数などを含む「ルーティング インスタンス」オブジェクトです。
4.vue.js の 2 つのコアとは何ですか?
回答: データ駆動型、コンポーネント システム
5. vue でよく使用されるいくつかの命令
回答: v-for、v-if、v-bind、v- on、v-show、v-else
6.vue で一般的に使用される修飾子は何ですか?
回答: .prevent: submit イベントによってページがリロードされなくなります; .stop: click イベントのバブリングを防止します; .self: イベントが要素内ではなく要素自体で発生するとトリガーされます。サブ要素; .capture : イベントをリッスンし、イベントが発生すると
7.v-on が呼び出されます。v-on に複数のメソッドをバインドできますか?
回答: はい
8. vue におけるキー値の役割は何ですか?
回答: Vue.js が v-for を使用してレンダリングされた要素リストを更新する場合、デフォルトでは「インプレース再利用」戦略が使用されます。データ項目の順序が変更された場合、Vue はデータ項目の順序に一致するように DOM 要素を移動しません。単に各要素をそこで再利用し、特定のインデックスでレンダリングされた各要素が表示されるようにします。キーの主な役割は、仮想 DOM を効率的に更新することです。
9.vue の計算プロパティとは何ですか?
回答: テンプレートにロジックを入れすぎると、テンプレートが重くなり、保守が困難になります。データの複雑な処理が必要で、複数回使用される可能性がある場合は、計算された属性を使用するようにしてください。メリット：①データ処理構造が明確になる、②データに応じてデータが更新され、処理結果が自動更新される、③calculated 属性内の this が vm インスタンスを指す、④テンプレートを呼び出す際に記述するだけ計算された属性名を直接取得する; ⑤ 一般的に使用される getter メソッドは、データを取得するために使用することもできますが、set メソッドを使用してデータを変更することもできます; ⑥ メソッドと比較すると、メソッドは依存するデータの変更に関係なく再計算されますが、依存するデータが変更されると、メソッドは再計算されます。変更されない場合、computed はキャッシュから取得され、再計算されません。
10.vue などの単一ページ アプリケーションとその利点と欠点
回答: 利点: Vue の目標は、可能な限り単純な API を通じて応答性の高いデータ バインディングと結合されたビュー コンポーネントを実現することです。中心となるのは、リアクティブ データ バインディング システムです。 MVVM、データ駆動型、コンポーネント化、軽量、簡潔、効率的、高速、そしてモジュールに優しい。
短所: 下位バージョンのブラウザはサポートせず、少なくとも IE9 のみをサポート; SEO の最適化には役に立たない (SEO をサポートしたい場合は、サーバー経由でコンポーネントをレンダリングすることをお勧めします); 読み込みに比較的長い時間がかかります初めてホームページにアクセスする場合; ブラウザのナビゲーションボタンは使用できないため、自分で進む・戻るを実現する必要があります。
11. vue-router の動的ルーティングを定義するにはどうすればよいですか? 渡された値を取得する方法
回答: ルーター ディレクトリの Index.js ファイルで、/:id をpath 属性。ルーター オブジェクトの params.id を使用して取得されます。
以上がVuejs の面接でよく聞かれる 9 つの質問、知っていますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
