Vue解析--面接官の質問にどう対応するか
3835 ワード
最近の面接では、Vueに関するソースコードや「ファミリーバケツ」などの質問が相次いでいます.では、これらの質問に対して、私たちはどのように答えたらいいのでしょうか.ここではVueに対する理解を整理して参考にします.
1.Vueは何ですか.
Vueはユーザインタフェースを構築する漸進的なフレームワークであり、非常に典型的なMVVMのプログラム構造(model-view-viewmodel)でもある.
公式用語:
Vue(読み方/vju)ː/,viewと同様)は、ユーザインタフェースを構築するための漸進的なフレームワークです.他の大型フレームワークとは異なり,Vueは底から上へ層毎に適用できるように設計されている.Vueのコアライブラリは、ビューレイヤのみに注目し、使いやすいだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も容易です.一方、Vueは、近代的なツールチェーンやさまざまなサポートクラスライブラリと組み合わせて使用される場合、複雑な単一ページアプリケーションを駆動することができます.
2.vue MVVM構造はMVCよりどこがいいですか?
MVCモードはMVVMモードの基礎であり、この2つのモードはMVCモードの最適化改良版に似ており、彼らの2つのMVであるModel、viewは同じであり、異なるのはMV間の絆部分である.
►MVCとは?
MVCは、ビューを変更することなく、ビューのユーザ入力に対する応答方式を変更することを可能とし、ユーザはViewに対する操作をController処理に渡し、ControllerではViewのイベントに応答してModelのインタフェースを呼び出してデータを操作し、Modelが変化すると関連ビューに更新を通知する.
フロントエンドにフレームがなければ,オリジナルのhtml+jsのみを用い,MVCモードはこのように理解できる.htmlをviewと見なす.jsはcontrollerと見なし、ユーザーとアプリケーションのインタラクションを処理し、viewに対する操作(イベントの傍受)に応答し、Modelを呼び出してデータを操作し、modelとviewの同期を完了する(modelの変更に応じて、セレクタによってviewを操作する).jsのajaxをModel,すなわちデータ層とし,ajaxによりサーバからデータを取得する.
»MVVMとは?
MVVMとMVCの最大の違いは、MVVMがViewとModelの自動同期を実現することです.つまり、Modelのプロパティが変更されると、Dom要素を手動で操作してViewの変更を変えるのではなく、そのプロパティを変更すると、そのプロパティに対応するViewレイヤデータが自動的に変更されます.Vueを例にとると、
ここのhtml=>Viewレイヤでは、ここのViewはテンプレート構文によって宣言されたDOM要素にデータをレンダリングし、View ModelがModelを更新すると、データバインディングによってViewに更新されることがわかります.
VueインスタンスのdataはModelレイヤに相当し、ViewModelレイヤのコアはVueの双方向データバインドであり、Modelが変化するとViewもリアルタイムで更新することができ、同様に、Viewの変化もModelを変化させることができる.
全体的に見ると、MVVMはMVCよりずっと簡素で、業務とインタフェースの依存を簡素化するだけでなく、データの頻繁な更新の問題も解決し、セレクタでDOM要素を操作する必要はありません.MVVMでは,ViewはModelの存在を知らないため,ModelとView ModelでもViewは観測されず,この低結合モードはコードの再利用性を向上させる.
3.Vue応答レイアウトの原理は何ですか?
VueはObjectに基づく.definePropertyはデータ応答を実現するために、Object.definePropertyはES 5でshimできない機能で、IE 8の次のバージョンのブラウザはサポートされていません.VueはObjectを通過する.definePropertyのgetter/setterメソッドは収集した依存項目をリスニングし、属性がアクセスされ、変更されたときに変化を通知し、さらにビューデータを更新する.現代のJavaScriptの制約(およびObject.observeの廃棄)により、Vueはオブジェクト属性の追加または削除を検出できません.Vueはインスタンスの初期化時に属性に対してgetter/setter変換プロセスを実行するため、Vueを変換するには、属性がdataオブジェクト上に存在する必要があります.そうすれば、応答することができます.
オブザーバーモード(Observer,Watcher,Dep)
まず紹介します.後の文章は具体的に書きます.
Observerクラス
主にVueのデータdefinePropertyにgetter/setterメソッドを追加し、getter/setterで依存を収集したり、通知を送信したりして更新します.
Watcherクラス
データ(または式)の変化を観察し、収集依存プロセスもあるコールバック関数を実行するために使用され、主に$watch APIおよび命令に使用される.
Depクラス(Dependence依存の略)
観察可能なオブジェクトであり、異なるコマンドで購読できます(マルチキャストです).
オブザーバーモードは、パブリッシュ/サブスクリプションモードに似ていますが、実は少し違います.
パブリケーション/サブスクリプションモードは、統合されたイベント配信スケジューリングセンター、onはセンターにイベント(サブスクリプション)を追加し、emitはセンターからイベント(パブリケーション)を取り出し、パブリケーションとサブスクリプション、およびパブリケーション後のサブスクリプションのスケジューリングは、センターによって統合されます.
しかし,オブザーバーモードにはobserverオブザーバーとsubjectトピックオブジェクトが含まれる中心はない.observerがsubjectを観察する必要がある場合,まずsubjectに登録する必要があるsubjectオブジェクトはobserverオブジェクトの集合ハンドルを持ち,subjectオブジェクトの内部状態が変化すると,この変化をすべての観察者に通知する.
4.Vueソースは知っていますか?
以前はVueソースについても少し研究していましたが、体系的な記録はありませんでしたが、今は少し時間がありますので、基礎的なまとめをしてみましょう.自分の惰性を克服する一方で、もう一度温めたい.はは~~まずVueソースのディレクトリ構造を見てみましょう.
各モジュールの具体的な機能を熟知することは、ソースコードを深く研究するのに役立ちます.私はこっそりあなたに教えて、私は更に下のあの思惟の導図を理解するのが好きで、次のすべての文章はすべて下図の各段階によって分析します!
まず概要を見てみましょう.
私はgithubで同時に更新します.好きならstarをあげてもいいです.まずありがとうございます.
1.浅析Vueソース(一)——造物創世2.浅析Vueソースコード(二)-initMixin(上)3.浅析Vueソースコード(三)——initMixin(下)4.浅析Vueソースコード(四)——$mount中のtemplateのコンパイル–parse 5.浅析Vueソースコード(五)——$mount中のtemplateのコンパイル–optimize 6.浅析Vueソースコード(六)——$mount中のtemplateのコンパイル–generate 7.浅析Vueソースコード(七)——renderからVNodeの生成
1.Vueは何ですか.
Vueはユーザインタフェースを構築する漸進的なフレームワークであり、非常に典型的なMVVMのプログラム構造(model-view-viewmodel)でもある.
公式用語:
Vue(読み方/vju)ː/,viewと同様)は、ユーザインタフェースを構築するための漸進的なフレームワークです.他の大型フレームワークとは異なり,Vueは底から上へ層毎に適用できるように設計されている.Vueのコアライブラリは、ビューレイヤのみに注目し、使いやすいだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も容易です.一方、Vueは、近代的なツールチェーンやさまざまなサポートクラスライブラリと組み合わせて使用される場合、複雑な単一ページアプリケーションを駆動することができます.
2.vue MVVM構造はMVCよりどこがいいですか?
MVCモードはMVVMモードの基礎であり、この2つのモードはMVCモードの最適化改良版に似ており、彼らの2つのMVであるModel、viewは同じであり、異なるのはMV間の絆部分である.
►MVCとは?
MVCは、ビューを変更することなく、ビューのユーザ入力に対する応答方式を変更することを可能とし、ユーザはViewに対する操作をController処理に渡し、ControllerではViewのイベントに応答してModelのインタフェースを呼び出してデータを操作し、Modelが変化すると関連ビューに更新を通知する.
フロントエンドにフレームがなければ,オリジナルのhtml+jsのみを用い,MVCモードはこのように理解できる.htmlをviewと見なす.jsはcontrollerと見なし、ユーザーとアプリケーションのインタラクションを処理し、viewに対する操作(イベントの傍受)に応答し、Modelを呼び出してデータを操作し、modelとviewの同期を完了する(modelの変更に応じて、セレクタによってviewを操作する).jsのajaxをModel,すなわちデータ層とし,ajaxによりサーバからデータを取得する.
»MVVMとは?
MVVMとMVCの最大の違いは、MVVMがViewとModelの自動同期を実現することです.つまり、Modelのプロパティが変更されると、Dom要素を手動で操作してViewの変更を変えるのではなく、そのプロパティを変更すると、そのプロパティに対応するViewレイヤデータが自動的に変更されます.Vueを例にとると、
{{ title }}
var vueDemo = new Vue({
el: '#vueDemo',
data: {
title: 'Hello Vue!'
},
methods: {
clickEvent: function () {
this.title = "hello word!"
}
}
})
ここのhtml=>Viewレイヤでは、ここのViewはテンプレート構文によって宣言されたDOM要素にデータをレンダリングし、View ModelがModelを更新すると、データバインディングによってViewに更新されることがわかります.
VueインスタンスのdataはModelレイヤに相当し、ViewModelレイヤのコアはVueの双方向データバインドであり、Modelが変化するとViewもリアルタイムで更新することができ、同様に、Viewの変化もModelを変化させることができる.
全体的に見ると、MVVMはMVCよりずっと簡素で、業務とインタフェースの依存を簡素化するだけでなく、データの頻繁な更新の問題も解決し、セレクタでDOM要素を操作する必要はありません.MVVMでは,ViewはModelの存在を知らないため,ModelとView ModelでもViewは観測されず,この低結合モードはコードの再利用性を向上させる.
3.Vue応答レイアウトの原理は何ですか?
VueはObjectに基づく.definePropertyはデータ応答を実現するために、Object.definePropertyはES 5でshimできない機能で、IE 8の次のバージョンのブラウザはサポートされていません.VueはObjectを通過する.definePropertyのgetter/setterメソッドは収集した依存項目をリスニングし、属性がアクセスされ、変更されたときに変化を通知し、さらにビューデータを更新する.現代のJavaScriptの制約(およびObject.observeの廃棄)により、Vueはオブジェクト属性の追加または削除を検出できません.Vueはインスタンスの初期化時に属性に対してgetter/setter変換プロセスを実行するため、Vueを変換するには、属性がdataオブジェクト上に存在する必要があります.そうすれば、応答することができます.
オブザーバーモード(Observer,Watcher,Dep)
まず紹介します.後の文章は具体的に書きます.
Observerクラス
主にVueのデータdefinePropertyにgetter/setterメソッドを追加し、getter/setterで依存を収集したり、通知を送信したりして更新します.
Watcherクラス
データ(または式)の変化を観察し、収集依存プロセスもあるコールバック関数を実行するために使用され、主に$watch APIおよび命令に使用される.
Depクラス(Dependence依存の略)
観察可能なオブジェクトであり、異なるコマンドで購読できます(マルチキャストです).
オブザーバーモードは、パブリッシュ/サブスクリプションモードに似ていますが、実は少し違います.
パブリケーション/サブスクリプションモードは、統合されたイベント配信スケジューリングセンター、onはセンターにイベント(サブスクリプション)を追加し、emitはセンターからイベント(パブリケーション)を取り出し、パブリケーションとサブスクリプション、およびパブリケーション後のサブスクリプションのスケジューリングは、センターによって統合されます.
しかし,オブザーバーモードにはobserverオブザーバーとsubjectトピックオブジェクトが含まれる中心はない.observerがsubjectを観察する必要がある場合,まずsubjectに登録する必要があるsubjectオブジェクトはobserverオブジェクトの集合ハンドルを持ち,subjectオブジェクトの内部状態が変化すると,この変化をすべての観察者に通知する.
4.Vueソースは知っていますか?
以前はVueソースについても少し研究していましたが、体系的な記録はありませんでしたが、今は少し時間がありますので、基礎的なまとめをしてみましょう.自分の惰性を克服する一方で、もう一度温めたい.はは~~まずVueソースのディレクトリ構造を見てみましょう.
各モジュールの具体的な機能を熟知することは、ソースコードを深く研究するのに役立ちます.私はこっそりあなたに教えて、私は更に下のあの思惟の導図を理解するのが好きで、次のすべての文章はすべて下図の各段階によって分析します!
まず概要を見てみましょう.
私はgithubで同時に更新します.好きならstarをあげてもいいです.まずありがとうございます.
1.浅析Vueソース(一)——造物創世2.浅析Vueソースコード(二)-initMixin(上)3.浅析Vueソースコード(三)——initMixin(下)4.浅析Vueソースコード(四)——$mount中のtemplateのコンパイル–parse 5.浅析Vueソースコード(五)——$mount中のtemplateのコンパイル–optimize 6.浅析Vueソースコード(六)——$mount中のtemplateのコンパイル–generate 7.浅析Vueソースコード(七)——renderからVNodeの生成