Webフロントエンド面接のvue
目次
mvcとmvvm
vueライフサイクル
vueの双方向バインドの原理は何ですか
vueコンポーネント通信
vueサーバレンダリング
vueパフォーマンス最適化
ue-routerにはどんなナビゲーションフックがありますか?
vue-routerはどのように履歴リターンプロンプトをしますか?
vue-routerはどのようにユーザーのログイン権限などをしますか?
axiosキャンセルリクエスト
vuexの原理
mvcとmvvm
mvc View:ビューレイヤuiインタフェース controller:コントローラは、ユーザ要求通知Model変更を受け入れて処理し、ModelをView に戻す. Model:モデルデータ
MVVMはModel,View,ViewModelの3つに分けられる. Model:データモデルを表し、データとビジネスロジックはModel層で定義されています. View:UIビューを表し、データの展示を担当します. ViewModel:インタフェース(view)に対応するModelです.ViewModelの役割は、modelオブジェクトを表示および入力が可能なインタフェースデータオブジェクトにカプセル化することです.
ModelとViewModelの間には双方向のデータバインドがあります.したがって、Modelのデータが変更されると、Viewレイヤのリフレッシュがトリガーされ、ユーザーの操作によって変更されたデータもModelで同期されます.
簡単に言えば、View ModelはViewとModelのコネクタであり、ViewとModelはView Modelを通じて双方向バインドを実現している.
MVVMとMVCの最大の違いは次のとおりです.
これにより、ViewとModelの自動同期が実現されます.つまり、Modelのプロパティが変更された場合、Dom要素を手動で操作することなく、Viewの表示を変更することができます.プロパティを変更すると、そのプロパティに対応するViewレイヤの表示が自動的に変更されます.
vueライフサイクル
レンダーパスの親beforeCreate->親created->親beforeMount->子beforeCreate->子created->子beforeMount->子mounted->親mountedサブコンポーネント更新プロシージャの親beforeUpdate->子beforeUpdate->子updated->親updated->親updated
親コンポーネント更新プロセス親beforeUpdate->親updated
破棄プロセスの親beforeDestroy->子beforeDestroy->子destroyed->親destroyed
vueの双方向バインドの原理は何ですか
vue.jsはデータハイジャックとパブリッシャー-サブスクライバモードを組み合わせた方式を採用し、Object.defineProperty()は、各属性のsetter,getterをハイジャックし、データが変動したときに購読者にメッセージを発行し、対応するリスニングコールバックをトリガーします.
具体的な手順:
ステップ1:observeが必要なデータオブジェクトを再帰的に遍歴し、サブプロパティオブジェクトのプロパティを含め、setterとgetterを加えると、そのオブジェクトの値に値を割り当てるとsetterがトリガーされ、データの変化を傍受できます
ステップ2:compileテンプレート命令を解析し、テンプレート内の変数をデータに置き換え、レンダリングページビューを初期化し、各命令に対応するノードを更新関数にバインドし、傍受データの購読者を追加します.データが変更されると、通知を受け取り、ビューを更新します.ステップ3:Watcher購読者はObserverとCompileの間の通信の橋渡しです.主なことは、自分がインスタンス化されたときに属性サブスクライバ(dep)に自分自身が属性変動dep.notice()通知を待たなければならないupdate()メソッドを追加すると、自分のupdate()メソッドを呼び出し、Compileにバインドされたコールバックをトリガーして、仕事が後退することです.
ステップ4:MVVMはデータバインドの入口として、Observer、Compile、Watcherの3つを統合し、Observerを通じて自分のmodelデータの変化を傍受し、Compileを通じてコンパイルテンプレート命令を解析し、最終的にWatcherを利用してObserverとCompileの間の通信ブリッジを構築し、データの変化->ビューの更新に達する.ビューインタラクティブ変化(input)->データモデル変更の双方向バインド効果.
vueコンポーネント通信
親コンポーネントが子コンポーネントに値を渡す
親コンポーネントはpropsを介してサブコンポーネントにデータを渡します.注意:コンポーネント内のデータには、data、props、computedの3つの形式があります.
子コンポーネントが親コンポーネントに値を渡す(イベント形式で)
サブコンポーネントはeventsを介して親コンポーネントにメッセージを送信し、実際にはサブコンポーネントが自分のデータを親コンポーネントに送信します.($emit)
一般的な使用シーンは、次の3つに分類されます.
親子通信: 親から子へのデータ転送はprops、子から親へのデータ転送はevents(兄弟通信: Bus;Vuex クロスレベル通信: Bus;Vuex;provide/inject API、
vueサーバレンダリング
vueパフォーマンス最適化
ue-routerにはどんなナビゲーションフックがありますか?
3つのグローバルナビゲーションフック: router.beforeEach(to, from, next), router.beforeResolve(to, from, next), router.afterEach(to, from ,next)
アセンブリ内フック beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
個別ルーティング機能 beforeEnter
vue-routerはどのように履歴リターンプロンプトをしますか?
vue-routerはどのようにユーザーのログイン権限などをしますか?
axiosキャンセルリクエスト
要求されているajaxをurl+要求方式+パラメータ文字列=>[{ajaxName:'http://crm/login&post',fun:xxx}]リクエスト時にこの配列にこのajaxがあるかどうかを探して、もしあるならこのajaxのfun関数を呼び出して、前回のリクエストをキャンセルして、もしないならばこの配列にこのajaxを追加して、終わる時このajaxを配列からクリアしました
vuexの原理
Vuexは一方向のデータストリームを実現し、グローバルに1つのStateを持ってデータを格納し、コンポーネントがStateのデータを変更する場合、Mutationを通じて行わなければならない.Mutationは同時に、外部プラグイン呼び出しによるStateデータの更新を提供するサブスクライバモードを提供する.一方、すべての非同期操作(バックエンドインタフェースを呼び出して更新データを非同期で取得するのが一般的)や一括の同期操作はActionを実行する必要があるが、ActionもStateを直接変更することはできないのか、MutationでStateのデータを変更する必要があるのか.最後に、Stateの変化に応じてビューにレンダリング
mvcとmvvm
vueライフサイクル
vueの双方向バインドの原理は何ですか
vueコンポーネント通信
vueサーバレンダリング
vueパフォーマンス最適化
ue-routerにはどんなナビゲーションフックがありますか?
vue-routerはどのように履歴リターンプロンプトをしますか?
vue-routerはどのようにユーザーのログイン権限などをしますか?
axiosキャンセルリクエスト
vuexの原理
mvcとmvvm
mvc
MVVMはModel,View,ViewModelの3つに分けられる.
ModelとViewModelの間には双方向のデータバインドがあります.したがって、Modelのデータが変更されると、Viewレイヤのリフレッシュがトリガーされ、ユーザーの操作によって変更されたデータもModelで同期されます.
簡単に言えば、View ModelはViewとModelのコネクタであり、ViewとModelはView Modelを通じて双方向バインドを実現している.
MVVMとMVCの最大の違いは次のとおりです.
これにより、ViewとModelの自動同期が実現されます.つまり、Modelのプロパティが変更された場合、Dom要素を手動で操作することなく、Viewの表示を変更することができます.プロパティを変更すると、そのプロパティに対応するViewレイヤの表示が自動的に変更されます.
vueライフサイクル
レンダーパスの親beforeCreate->親created->親beforeMount->子beforeCreate->子created->子beforeMount->子mounted->親mountedサブコンポーネント更新プロシージャの親beforeUpdate->子beforeUpdate->子updated->親updated->親updated
親コンポーネント更新プロセス親beforeUpdate->親updated
破棄プロセスの親beforeDestroy->子beforeDestroy->子destroyed->親destroyed
vueの双方向バインドの原理は何ですか
vue.jsはデータハイジャックとパブリッシャー-サブスクライバモードを組み合わせた方式を採用し、Object.defineProperty()は、各属性のsetter,getterをハイジャックし、データが変動したときに購読者にメッセージを発行し、対応するリスニングコールバックをトリガーします.
具体的な手順:
ステップ1:observeが必要なデータオブジェクトを再帰的に遍歴し、サブプロパティオブジェクトのプロパティを含め、setterとgetterを加えると、そのオブジェクトの値に値を割り当てるとsetterがトリガーされ、データの変化を傍受できます
ステップ2:compileテンプレート命令を解析し、テンプレート内の変数をデータに置き換え、レンダリングページビューを初期化し、各命令に対応するノードを更新関数にバインドし、傍受データの購読者を追加します.データが変更されると、通知を受け取り、ビューを更新します.ステップ3:Watcher購読者はObserverとCompileの間の通信の橋渡しです.主なことは、自分がインスタンス化されたときに属性サブスクライバ(dep)に自分自身が属性変動dep.notice()通知を待たなければならないupdate()メソッドを追加すると、自分のupdate()メソッドを呼び出し、Compileにバインドされたコールバックをトリガーして、仕事が後退することです.
ステップ4:MVVMはデータバインドの入口として、Observer、Compile、Watcherの3つを統合し、Observerを通じて自分のmodelデータの変化を傍受し、Compileを通じてコンパイルテンプレート命令を解析し、最終的にWatcherを利用してObserverとCompileの間の通信ブリッジを構築し、データの変化->ビューの更新に達する.ビューインタラクティブ変化(input)->データモデル変更の双方向バインド効果.
vueコンポーネント通信
親コンポーネントが子コンポーネントに値を渡す
親コンポーネントはpropsを介してサブコンポーネントにデータを渡します.注意:コンポーネント内のデータには、data、props、computedの3つの形式があります.
子コンポーネントが親コンポーネントに値を渡す(イベント形式で)
サブコンポーネントはeventsを介して親コンポーネントにメッセージを送信し、実際にはサブコンポーネントが自分のデータを親コンポーネントに送信します.($emit)
一般的な使用シーンは、次の3つに分類されます.
$emit)である.親鎖/子鎖を介して通信することもできる($parent/$children).refはコンポーネントインスタンスにもアクセスできます.provide/inject API; $attrs/$listeners $attrs/$listeners vueサーバレンダリング
vueパフォーマンス最適化
ue-routerにはどんなナビゲーションフックがありますか?
3つのグローバルナビゲーションフック:
アセンブリ内フック
個別ルーティング機能
vue-routerはどのように履歴リターンプロンプトをしますか?
vue-routerはどのようにユーザーのログイン権限などをしますか?
axiosキャンセルリクエスト
要求されているajaxをurl+要求方式+パラメータ文字列=>[{ajaxName:'http://crm/login&post',fun:xxx}]リクエスト時にこの配列にこのajaxがあるかどうかを探して、もしあるならこのajaxのfun関数を呼び出して、前回のリクエストをキャンセルして、もしないならばこの配列にこのajaxを追加して、終わる時このajaxを配列からクリアしました
vuexの原理
Vuexは一方向のデータストリームを実現し、グローバルに1つのStateを持ってデータを格納し、コンポーネントがStateのデータを変更する場合、Mutationを通じて行わなければならない.Mutationは同時に、外部プラグイン呼び出しによるStateデータの更新を提供するサブスクライバモードを提供する.一方、すべての非同期操作(バックエンドインタフェースを呼び出して更新データを非同期で取得するのが一般的)や一括の同期操作はActionを実行する必要があるが、ActionもStateを直接変更することはできないのか、MutationでStateのデータを変更する必要があるのか.最後に、Stateの変化に応じてビューにレンダリング