質問に直面--Vue 2019フロントエンドインタビューシリーズ

Vueの双方向結合の原則

パブリッシャをハイジャックデータの使用と組み合わせるよう結合MVVM、 - Object.definePropertyによる各属性をハイジャックする方法モード加入者は（）セッターは、ゲッターは、加入者にメッセージを投稿したときにデータの変更、対応するリスナーコールバックをトリガします。

ポイント：
最新の値を取得するために変更されることがあり、データオブジェクトのすべての属性を聴取することができ、データリスナーにオブザーバーを達成するために、1と加入者に通知
2を、コンパイルがパーサ命令を実装し、各要素ノード走査及びバインディング更新機能と対応する命令テンプレートに応じて、置換データを命令を解析
ウォッチャーを達成するために、図3に示すように、コンパイルおよびオブザーバを接続するブリッジとして、サブスクライブすることができ、各プロパティの変更を通知することが、実行命令を結合しますビュー更新するために、コールバック関数に対応する
、三つ以上の統合を4、MVVMエントリ関数を

具体的な手順：

私たちは、オブジェクト属性のサブプロパティを含む、再帰的にトラバースデータオブジェクトを観察し、加えて、すべてのsetterメソッドとgetterする必要がある
ので、このオブジェクトに値を代入しますが、データの変更を聞くことができますので、それは、セッターがトリガされます
コマンドの構文解析テンプレートをコンパイルし、テンプレートは、データの中に変数を交換し、ページビューをレンダリングする初期化し、バインディング更新機能を対応する各命令ノード、データが変更されることがあります一度、データを監視するための加入者を追加し、通知を受信、アップデートされますビュー
加入者ウォッチャーがオブザーバーとコンパイルの間の通信の橋で、行うための主なものは以下のとおりです。
- 自分自身のインスタンスを作成する際に内部あなた自身を追加するために、加入者（DEP）を属性にします
- それ自体はupdate（）メソッドを持っている必要があります
- プロパティがdep.notice（）の通知を変更するようにするには、その後、update（）メソッド、そして結合したトリガーのコールバックコンパイル、ミッションを達成自体を呼び出すことができます。
最終的にウォッチャーの間の通信ブリッジを使用してエントリとして結合MVVMデータ、統合オブザーバー、コンパイルおよび3ウォッチャー、コンパイルにより、コンパイラのコマンドテンプレートを解決するために、オブザーバーを通じて、自分のデータモデルの変更を監視するためには、オブザーバーとコンパイルは、到達立てデータの変更 - >ビューの更新、インタラクティブ変更（入力）を表示 - >双方向バインディング効果データモデルの変更を。

説明最初のページからVUE - データの変更 - ページのUIを更新しますか？

ヴューは、初期化フェーズに入ると、一方ではVueの属性データを横断し、フォームに変換するObject.definePropertyゲッター/セッターデータハイジャックを達成する（Vue3.0プロキシ上で詳述しない）、一方、ヴュー要素ノードを解析する各命令のためのコンパイラの命令は、ビューを初期化し、更新するウォッチャーの試みを購読、加入者が所有するこの時間ウォッチャーは、DEPが初期化が完了した場合には、メッセージに追加しました。
データ変更は、観察者はセッターメソッドをトリガしたとき、直ちに内部のVueの差分アルゴリズムにより、すべての加入者のアレイを横断Dep.notify（）、発を呼び出し、その更新メソッドを呼び出し、そして、適切なアップデートパッチは、サブスクリプションを完了し誰がビューを変更しました。

Vueのライフサイクル

詳細VUEのライフサイクル

beforeCreateとcreated
beforeMountとmounted
beforeUpdateとupdated
beforeDestoryとdestoryed
activatedとdeactivated

Vueのを通信するコンポーネント間

コンポーネント間通信のVue 6つの方法

小道具/ $発します
$ $上/放出
vuex
$ ATTRS / $リスナー
提供/注入
$親/ $子供与REF

差分時計、属性を計算する方法、および

データの変化に応じて、モニターを見て。プロパティが自動的に計算されたリスナーに依存する値が動的に変化戻り、主な目的は、テンプレートの複雑な計算を単純化することです。違いは、使用から来るので、ちょうど動的な値は、その後、計算属性を使用する必要があります。変更は、時計と、ビジネスロジックの実装の価値を知っている必要があります。
メソッドパラメータを受け入れることができる方法であり、計算、計算することができない方法ではなく、キャッシュすることができます。これは、他の計算された、あるいは他のデータ要素とは独立して計算することができます。

どのようにデータリセットVUE

Object.assign（）を使用し、VM。$データは、データの現在の状態で得ることができる、VM。$ Options.dataデータは、初期化状態成分で取得することができます。

Object.assign(this.$data, this.$options.data())

コンポーネント書かれた名前のオプションの役割は何ですか？

キープアライブを使用してプロジェクトは、コンポーネント名のキャッシュフィルタで使用することができた場合
DOMは、再帰的なコンポーネントをやったときに、自分の名前を呼び出す必要があります
グループ内のデバッグツールをVUE-デベロッパーツールには、表示名がVUEのアセンブリ名によって決定された参照します

VUE-ルータフック関数

公式文書：VUE-フック関数ルータ

グローバルフロントガード router.beforeEach
Globalアナリティックガード router.beforeResolve
グローバルリアフック router.afterEach
排他的なガードをルーティング beforeEnter
アセンブリ内のガードbeforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

はじめに、フロントエンドのルーティングVUE-ルータの実装原理

`route`そして、`router`の違いは何ですか？

routeそれには、「ルーティング情報オブジェクト」でありpath、params、hash、query、fullPath、matched、nameおよび他のルーティング情報パラメータ。
router「ルーティングインスタンスオブジェクト」方法を含むルーティングジャンプ（あるpush、replace等）は、フック関数。

Vueのに反応し、理解についての話、と単純な比較を行います

1.原則として異なるモニター・データの変更

ゲッター/セッターハイジャック経由VUEといくつかの機能は、迅速に仮想DOMの正確な違いを計算することができます。これは、それがレンダリング処理であるため、各コンポーネントの依存関係を追跡し、コンポーネントは、ツリー全体を再レンダリングする必要はありません。
反応デフォルトは、アプリケーションの状態が変更されるたびに、最適化されていない場合には、比較として引用され、すべてのサブコンポーネントが再レンダリングされます、VDOMの不要な再レンダリングの多くにつながる可能性があります。

特別な最適化Vueが良好な性能を達成することができなくなり、して反応のために、それはPureComponent / shouldComponentUpdateこのライフサイクル・アプローチによって制御する必要があります。お使いのアプリケーション、複雑な相互作用は、UIの変更の多くに対処する場合は、仮想DOMは良いアイデアである使用。あなたが頻繁に要素を更新しない場合は、[仮想DOMは必ずしも適用されない、パフォーマンスが直接DOMを操作しない場合があります。

なぜ不正確なモニタデータの変化に反応？不変のデータに重点反応しながらのVueの差がして、変数データを使用して設計、Vueのに反応するからです。

2.異なるデータストリーム
CMD-値下げ - ロゴ

双方向のVモデルの双方向のコンポーネントとDOM間の結合により、結合のVueのデフォルトサポート。しかし、親子アセンブリとの間に、データフロー内の小道具は、一方向のバージョン2.xであります
提唱されてREACT一方向のデータフローである、彼はのonChange / SETSTATE（）モードと呼ばれます。

しかし、州の規制の枠組みは、我々は一般的に、我々はこれが違いであると感じ、など、非常に多くの時間をVuexとReduxの双方向データフローを使用しますので。

異なるテンプレートの3レンダリング

表面には、別のテンプレートの構文

反応テンプレートはJSXによってレンダリングされます
Vueのは、HTML構文の拡張によってレンダリングされます

テンプレートの深い、異なる原理で、これは、それらの間の本質的な違いは以下のとおりです。

JS構文によって達成される、ループ、条件、ネイティブJSは、補間等を介して共通の構文テンプレートを達成するため、アセンブリ内のJSコードを反応させ
VUEは、V-場合必要性を実現することなどの指示、条件文によって実装、別個の構成要素とテンプレートJSコードを分離しています

对这一点，我个人比较喜欢 React 的做法，因为他更加纯粹更加原生，而 Vue 的做法显得有些独特，会把 HTML 弄得很乱。举个例子，说明 React 的好处：react 中 render 函数是支持闭包特性的，所以我们 import 的组件在 render 中可以直接调用。但是在 Vue 中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们 import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。

Vue 的 nextTick 的原理是什么？

1. 为什么需要 nextTick
Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。

2. 理解原理前的准备
首先需要知道事件循环中宏任务和微任务这两个概念(这其实也是面试常考点)。请阅大佬文章--彻底搞懂浏览器 Event-loop
常见的宏任务有 script, setTimeout, setInterval, setImmediate, I/O, UI rendering
常见的微任务有 process.nextTick(Nodejs),Promise.then(), MutationObserver;

3. nextTickを理解
し、nextTick原理はVUEのDOMの更新とnextTickコールバック関数が非同期キュー制御を実行した方法です。あなたは、ソースコードのこの部分を読めば、ここでの互換性の問題は、優雅な劣化があるので、あなたは、多くのisNative（）の判断を行うために発見されます。Vueの可視の開発チームは、パフォーマンスのケアと意図を考えました。
あなたの前のサイクル原理のイベントをより良く理解するならば、それはあなたがこの記事を読むことをお勧めします、記事のギャングをお読みください- 原則Vue.nextTickの実現を総合的に分析

いくつかの性質を有するVuex、

の5種類がありますがState、Getter、Mutation、Action、Module

VUEは-cliの私たちのために何をしていましたか？

まず第一に、あなたは何VUE-cliのことを知っておく必要がありますか？これは、Vue.jsに完全なシステムを迅速に開発をベースに、だけでなく、多くのNPMパッケージの集合体として理解することができます。第二に、VUE-cliの完全な機能は何？

.vueファイル- >ファイル.jsファイル
ES6文法を- > ES5文法
サス、以下、スタイラス- > CSS
静的リソースJPG、PNG、フォントの取り扱いやその他の
ホットアップデート
の環境変数の定義DEVと生産モードを区別するために
...

開発者は、デフォルトの設定を追加または変更する必要がある場合は、同じレベルのpackage.jsonで新しいファイルvue.config.jsを作成する必要があります

最後に、贈り物を送る：VUEを248個の知識ポイント（面接の質問は）あなたのための護衛しました