2019 Vueのインタビューの質問の要約(更新...)
MVVMパターンで1 VUE
即モデル - ビュー - ViewModelに。
Vueがデータ駆動型、自己のVueで、DOMデータバインディング、一度バインディングを作成し、DOM、およびデータは、いつでもデータの変更、DOMの変化が続く同期されます。
ViewModelには、それがVueのインスタンスである、のVueの中核です。Vueのスコープのインスタンスは、HTML要素が本体にHTML要素とすることができる場合、それは、参照される要素のIDであってもよいです。
DOMリスナーとデータバインディングがバインディング双方向を達成するための鍵です。変更が発生したときにDOMリスナーの変更は、すべてのページ・ビュー層のDOM要素を監視し、データ値は、モデル層で変更、データバインディングモニタデータモデル層、データの変更、DOM要素のビュー層の変更。
2. V-ショー命令、V-もし差が
コマンドをレンダリング条件、およびV-場合の違いは、要素がHTMLコードに存在している、それが真か偽かV-ショーということであり、値がtrueの場合にのみ、V-ifと、要素は、HTMLコードには存在しません。 。V-ショースタイルの命令は、CSSの要素の値のみを設定します
3. CSSは、現在のコンポーネントで動作するようにする方法
各VUEのコンポーネントでは、あなたが唯一の現在の組立作業に組み立てCSSに書きたい場合は、あなただけはすなわち、スタイルでスコープ記述する必要がある、JS、自分のCSSを定義することができます。
<style scoped></style>复制代码
4.命令のキープアライブ
キープアライブ言うVUE-ルータには、キープアライブの意味:
スイッチアウトアセンブリは、メモリ内に残っている、または再レンダリングを避けるために、その状態を維持することができます。この目的のために、キープアライブadd命令
<コンポーネント:ある= 'curremtView' キープアライブ> </部品>
5. Vuejsアセンブリ
vuejs建物部品の用途
Vue.component('componentName',{
/*component*/
});
// 这里注意一点,组件要先注册再使用
Vue.component('mine',{
template:'#mineTpl',
props:['name','title','city','content'] }); var v=new Vue({ el:'#vueInstance', data:{ name:'zhang', title:'this is title', city:'Beijing', content:'these are some desc about Blog' } });复制代码
6.ルーティングのネスト
ルーティングページはから始まる、ルートコンポーネントをレンダリングします、ジャンプページを作りたい、ページ全体のジャンプルータ-ビュー自体がその位置にレンダリングコンポーネントであるのではなく、コンポーネントをレンダリングするために、他のコンポーネント内にネストされますルーティング開始時刻を設定すると書きました:
var App = Vue.extend({ root });
router.start(App,'#app');复制代码
ここで、ルート成分が最初にアセンブリがルート#app整合素子に取り付けられ、ページをレンダリングするように構成ルーティングするために、登録されています。
命令V-ELの7.
時々、私たちはjqueryの、あなたは$エル所有のインスタンスで、この要素に簡単にアクセスするためのインデックスを登録し、V-elの命令を使用する要素に行くことができ、要素にアクセスしたいと使用したいです。
注意を払います
HTMLは大文字と小文字を区別しないので、V-EL:someElは小文字に変換されます。あなたはV-ELを使用することができますいくつかの-elが、この$ el.someElを設定し...
例
<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>
this.$els.msg.textContent //-> "hello"
this.$els.otherMsg.textContent// -> "world"
this.$els.msg//-><span>hello</span>复制代码
イベント名を使用して8 vue.js
vuejsで、私たちはしばしば、時にはDOM要素に、イベントの一部をバインドしたい時にはコンポーネントに結合し、結合しています。V-上でHTMLにイベントをバインド:それは敏感なの1.xのケースではありませんので、我々は、V-上のHTMLで書くので、もしクリック - 「イベント」、そしてevet名は、大文字で表示されません:クリック= " JSでmyEvent」は、エラー時に時間のようvuejs 1.xの結合事象をmyEventを書いて、私たちは、大文字を使用しないようにしてください。2.0でこの制限なし!
9. Vue.js何ですか
Vue.js(プログレッシブフレームは、ユーザインターフェースから構成されている。ヘビー級、他のフレームが異なる場合、Vueのボトムアップのコアライブラリインクリメンタル開発の懸念だけ.Vueビュー層の設計、および、非常に、学ぶことは非常に簡単です。他のライブラリまたは既存のプロジェクトとの容易な統合が。一方、Vueが単一ファイルアセンブリとVueのエコシステムのサポートを開発し、複雑な1ページのアプリケーションライブラリの使用を駆動することが十分に可能です。
Vue.js目標は、データの表示とシンプルなAPIなどのコンポーネントの組み合わせにより結合応答を達成することです
10. VueJS特性:
I:MVVMモード(可変データ(モデル)、ビュー(ビューを変更する)も変更され、ビュー(ビュー)も変更される)データ変数(モデルの変更しました)
MVVMパターンを使用すると、いくつかの利点があります。
1.低結合。ビューモデルは、モデルビューはまた、時定数を変更することができたときにモデルビューは、同じを変更することができViewModelに別のビューにバインドすることができ、変更や修正を独立させることができます。
2.再利用。あなたは非常に多くのビューは、このビューロジックを再利用し、内部のビューモデルの観点からいくつかのロジックを置くことができます。
3.自主開発。開発者はビジネスロジックとデータ(ViewModelに)の開発に集中することができます。設計者は、インターフェイス(ビュー)の設計に集中することができます。
4.テスト容易性。あなたはViewModelにするためのインターフェイス(ビュー)をテストすることができます
II:コンポーネント化
命令III
IIII:vue2.0は、仮想DOMをサポートするために始めました
vue1.0はい、本当にDOM操作要素と仮想ではありません
仮想DOM:ページのリフレッシュレートを向上させることができます
仮想DOMの長所と短所。
A:サイズ - のいずれかがより機能コード・パッケージでは、コードの行以上あることを意味します。幸いなことに、Vue.js 2.0(現在のバージョン21.4キロバイト)まだ比較的小さく、
そしてまた、多くのことを削除します。
B:メモリ - 同様に、仮想DOMは、これは、速度とメモリの使用状況を更新するDOMでのトレードオフで、メモリ内の既存のDOMのコピーを保存する必要があります。
C:すべての場合には適用されません - 仮想DOMを変更することができるならばバッチ時間は非常に良いです。しかし、それはそれ単独、稀更新の場合は?どれな
DOMの更新は、仮想DOMは、事前に計算された無意味もたらすでしょうです
11. Vue.js特長
シンプル:ページテンプレート+ JSONデータ+ Vueの例HTMLの組成物による
データドリブン:自動的にプロパティやトラッキングテンプレート依存式を算出し、
ページを構築するための再利用可能な、デカップリングコンポーネント:コンポーネントの
軽量:少量のコード、他のライブラリに依存しません
高速:DOM正確かつ効率的にバッチ更新
テンプレートに優しい:さまざまな方法によっては、NPMバウアーや他のインストール、に統合するのは簡単
12. Vue.jsとAngularJSその違いは何ですか?
ここではいくつかの選択肢Vueの代わりに角度原因が考えられます。
Vue.jsは、より柔軟かつオープンなソリューションです。それはあなたがあなたのアプリケーションを望むように整理することができます、というよりも、いつでもルール角度意思に従わなければなりません。既存のページにそれを埋め込むことができますし、巨大な1ページのアプリケーションを作成する必要はありませんので、それは、ちょうどビュー層です。ライブラリの他の側面との組み合わせでは、それはあなたがより多くのスペースを与えるが、適切な、あなたはまた、より多くのアーキテクチャ上の意思決定を行う必要があります。例えば、Vue.jsコアは、デフォルトのルーティングおよびAJAX機能が含まれ、一般的には、外部アプリケーションモジュール構築したシステムを使用負いません。これはおそらく最も重要な違いです
APIとインテリアデザインで、Vue.jsあなたはすぐにすべてのプロパティを把握し、開発に入れることができるように、角度よりもはるかに簡単。
それがダーティチェックを使用しないためVue.jsは、より優れた性能を持っています。長い時間ウォッチャーのためのより多くのように、角度が遅く、遅くなると、範囲内のすべての時間のデータが変更するので、すべてのウォッチャーを再評価する必要があります。それらの間の明確な依存性がある場合を除き、それは観察に基づいて依存追跡システムを使用しているため、Vueのは、問題ありませんので、すべてのデータの変更は、トリガーとは無関係です。
コンセプトVue.js命令とコンポーネントは、この明確な区別をします。独自のロジックとデータビューと - 成分は、自己完結型の別個のユニットを表すDOM操作命令は、パッケージのための唯一の原因です。角度では、両者の間には多くの概念の混乱があります。
13. Vue.jsとReact.js違いは何ですか?
それらはすべて、データドライバを提供した構造のアセンブリのビューを組み合わせることができる - React.jsとVue.jsは、いくつかの類似のを持っています。しかし、彼らの内部実装は完全に異なっています。メモリ状態を説明するために基づいて仮想DOM-- DOMツリーデータ構造を反応させます。反応したデータは、通常は不変とみなし、DOM操作は、計算の差分の仮想DOMを介して行われています。これとは対照的に、デフォルトのデータVue.jsは可変であり、かつ対応するDOMの更新を開始し、データを直接変更します。仮想DOMと比較すると、Vue.jsはデータバインディングのテンプレートとして、実際のDOMを使用して、実際のノードへの参照を保持します。
仮想DOMメソッドの機能説明ビューを提供し、それは非常にクールです。それはデータ観測機構を使用しないため、各アップデートは、このように定義介してビューとのデータの同期を確保し、アプリケーション全体を再レンダリングします。また、同型のJavaScriptアプリケーションの可能性を開きます。
実は、私自身のデザインのアイデアも非常に高く評価されて反応するように。しかし、一つの問題は、アセンブリのロジックとビューが強固に結合していることである反応します。一部の開発者のために、彼らはこれが利点だと思いますが、彼らは私たちが視覚的に優れたデザインとCSSを考えることを可能にするので、私のように、設計と開発の両方で、それはまだテンプレートを好む人、それらのためかもしれません。ロジックとJavaScriptコードのJSXミックスは私の思考プロセスを設計にマッピングされていると干渉しました。まだ視覚的なテンプレートと引き換えに、テンプレートDSL(命令)で軽量の追加、および論理的なコマンドとフィルターにパッケージ化することができることによりその代わり、Vue.js。
もう一つの問題は、反応することがある:DOMは完全に仮想DOM管理まで更新しているので、あなたが本当にコントロールしたいとき、自分のDOMは、(理論的にはあなたがすることができますが少しトリッキーですが、本質の戦いでそうなデザインに反応私は)思いました。アニメーションの場合、これは非常に迷惑になりますため、複雑な制御時間制限が必要です。この点で、Vue.jsは、より多くの柔軟性を可能にし、構築されたVue.jsとの豊かな相互作用の多くの例があります
ヴューのライフサイクルのご理解の下で14ください詳細?
合計を作成する前に8つの段階に分かれている/した後、ロード前/更新後前/前/後の破壊の後。
以前に作成した後/:beforeCreate段階では、まだ要素エルVUEインスタンスをマウントします。
ロード/リアの前に:beforeMount段階で、VUEの$エルインスタンスとデータが初期化されますが、DOMが仮想ノードとしてマウントする前に、まだ、data.messageが交換されていません。取り付けられた段階では、マウントのVUE例data.messageが正常にレンダリングされた、終了します。
/リアを更新する前に:データの変更は、それがのBeforeUpdateと更新されたメソッドをトリガするとき。
破壊の後/前:destroyメソッドの実装後に、データへの変更は、もはや周期関数をトリガする、例は、この点VUEは、結合していないと、イベントリスナーならびにDOMされたDOMが、構造がまだ存在示します
15のコンポーネント間の値を渡す方法は?
親コンポーネントとサブアセンブリの伝統的な価値観:小道具
親要素のサブアセンブリパスデータ:送信パラメータのEMIT法、トリガ・イベントの親コンポーネントによって$サブアセンブリ
いくつかのナビゲーションフックを持っている16 VUE-ルータ、?
グローバルナビゲーションフック
router.beforeEach(次の、からの)、
router.beforeResolve(次の、からの)、
(次の、から、の)router.afterEach
組立フック内
beforeRouteEnter、
beforeRouteUpdate、
beforeRouteLeave
一人で排他的なコンポーネントをルーティング
beforeEnter
17. VUE双方向結合の原理は何ですか
vue.jsパブリッシャをハイジャックと併せてデータの使用は、 - 対応するリスナーコールバックをトリガーする場合、データが変更されると、方法モード加入者Object.defineProperty()セッター、ゲッターによって各属性をハイジャックするために、加入者にメッセージを投稿。
突然変異とアクションがある18 vuexの特徴は何ですか?違いは何ですか?
状態データを修正するための変異が同期されます。
アクション類似muation、それ以外:アクションが突然変異を提出され、直接変更するのではなく状態
アクションは、任意の非同期操作を含めることができます
なぜ書き込みが反応アセンブリ19 / Vueのプロジェクトのライトキーには、その役割は何ですか?
開発中に、我々は重要な要素は、その兄弟要素で一意であることを確認する必要があります。差分アルゴリズムの重要な要素によって要素の値を判断するために来ることにより、不要な再レンダリング要素を減らし、移動または新規に作成されてからの要素です。
20.計算との違いを見ました。
計算は、計算された値に依存する属性、他の属性を計算して、計算された値がキャッシュされ、コンテンツが場合にのみ、算出された値の変更が返されます。
コールバックの変更値を聴いだろう見て、論理演算は、コールバックの数で行うことができます。
ですから、私たちはいくつかの複雑なビジネスロジックは、時計を使用することができます実行する必要がある値の変化を聴くため、計算を使用することができたときに動的に値を取得するために他の属性に依存する一般的な必要性インチ