2つの面接の質問をVue

リンク：https：//zhuanlan.zhihu.com/p/352543464

Vueインタビューの質問、「Vueのライフサイクルについての理解を詳しく説明してください」。

vueのライフサイクルは、作成の前後、読み込みの前後、更新の前後、破棄の前後の8つの段階に分かれています。

1. 作成前/作成後：beforeCreatedフェーズでは、vueインスタンスのマウント要素はまだ使用できません。

2. ロード前/ロード後：beforeMountフェーズでは、vueインスタンスの$ elとデータが初期化されますが、マウント前は仮想domノードであり、data.messageは置き換えられていません。

3. マウントされたステージでは、vueインスタンスがマウントされ、data.messageが正常にレンダリングされます。

4. 更新前/更新後：データが変更されると、beforeUpdateメソッドとupdatedメソッドがトリガーされます。

5. 破棄の前/後：destroyメソッドが実行された後、データへの変更は周期関数をトリガーしなくなります。これは、vueインスタンスがこの時点でイベントの監視とdomへのバインドを解放したことを示しますが、dom構造はまだ存在します。

「Vueの双方向データバインディングの原則についてのあなたの理解について話してください」。

簡単なものから詳細なものまで、インターネット上で多くの回答を見たことがあるかもしれませんが、ソースコードの原則/深さに触れる回答はめったにありません。

この問題について詳しく説明する方法を見てみましょう。

Vue.jsは、パブリッシャーサブスクライバーモデル
と組み合わせたデータハイジャックを使用して、Object.defineProperty（）を介して各プロパティのセッターとゲッターをハイジャックし、データが変更されたときにサブスクライバーにメッセージを公開し、対応するリスナーコールバックをトリガーします。

• 最初のステップ：サブ属性オブジェクトのプロパティを含む、監視が必要なデータオブジェクトの再帰的走査、セッターとゲッターの追加。
  この場合、このオブジェクトに値を割り当てるとセッターがトリガーされ、データの変更を監視できます。
• 2番目のステップ：コンパイルはテンプレート命令を解析し、テンプレート内の変数をデータに置き換え、レンダリングページビューを初期化し、更新関数を各命令に対応するノードにバインドし、データを監視するサブスクライバーを追加します。データが変更されると、受信通知に、ビューを更新します
• ステップ3：ウォッチャーサブスクライバーは、オブザーバーとコンパイルの間の通信ブリッジです。

主なことは次のとおりです。

• 1.インスタンス化されたら、属性サブスクライバー（dep）に自分自身を追加します
• 2. update（）メソッドが必要です
• 3.プロパティの変更dep.notice（）が通知されると、独自のupdate（）メソッドを呼び出して、コンパイルでバインドされたコールバックをトリガーできます。その後、それが実行されます。
• 4 4番目のステップ：データバインディングのエントリポイントとしてのMVVM、Observer、Compile、Watcherの統合、Observerを介したモデルデータの変更の監視、Compileを介したテンプレート命令の解析とコンパイル、最後にWatcherを使用したObserverとCompileの関係の設定データ変更を実現するための通信ブリッジ->ビューの更新。

インタラクティブな変更を表示（入力）->データモデル変更の双方向バインディング効果。

たとえば、「Vue.jsテンプレートのコンパイルについての理解について話してください」と尋ねます。

この質問にうまく答えることができれば、Vueの面接プロセスに合格することになります。次に、焦点を当てます。つまり、最初にASTツリーに変換され、次に結果のレンダリング関数がVNode（Vueの仮想DOMノード）を返します
。詳細な手順：

• まず、テンプレートはコンパイルコンパイラを介してAST構文ツリー（ソースコードの抽象構文構造のツリー表現である抽象構文ツリー）にコンパイルされます。コンパイルはcreateCompilerの戻り値であり、createCompilerを使用して作成します。コンパイラ。さらに、コンパイルはオプションのマージも担当します。次に、ASTは生成（AST構文ツリーをレンダリング関数文字列に変換するプロセス）を実行してレンダリング関数を取得します。renderの戻り値はVNodeです。これは、（ラベル名を含むVueの仮想DOMノードです。 、子ノード、テキストなど）など）基本的にここで、Vueインタビューセッションは終了しました。

• もちろん、次のように挑戦することもできます。イベントとvモデル：イベントの実現原則とvモデルスロットとキープアライブ：組み込みコンポーネントの実現原則移行：移行の実現原則

• Vue-router：公式ルーティングの実装原則

• Vuex：公式の状態管理の実装原則