以前のフレームワークの紹介とプロジェクトインタビュー2

まず、いくつかの面接の質問を見てみましょう

まず、いくつかの面接の質問を見て、自分で考え、どれだけ答えることができるかを考え、その答えを面接の質問と比較します。

これらの面接の質問とすべての面接に対処する方法を考える

1.Vueインタビューの質問

1.v-shoとv-ifの違いは何ですか

違い：

（1）条件が真の場合、違いはありません。条件が偽の場合、v-ifは要素を作成しません。v-レンダリング要素を表示してから非表示にします。
（2）、v-ifはデータフィルタリングに適しています。初期レンダリング、v-showは要素の切り替えに適しています

2.v-forでキーを使用する理由

（1）vueのリストループは次を追加する必要があります：key = "unique識別子" vueコンポーネントは頻繁に再利用され、Keyはコンポーネントの一意性を識別できるため、一意の識別子は可能な限りアイテム内のIDである必要があります、各コンポーネントのキーをより適切に区別するために主な目的は、仮想DOMを効率的に更新することです。
（2）キーは主にdom diffアルゴリズムに使用されます。diffアルゴリズムは同じレベルの比較であり、現在のラベルのキーと現在のラベル名を比較します。キーとラベル名が同じ場合、移動のみが行われます。操作によって要素が再作成または削除されることはありません。
（3）キーがない場合、デフォルトで「インプレース再利用」戦略が使用されます。データ項目の順序が変更された場合、Vueはデータ項目の変更に一致するようにDom要素を移動せず、単に元の位置で各要素を再利用します。最初の要素を削除すると、比較中にラベルが同じで値が異なることがわかった場合、前の位置が再利用され、新しい値がその位置に直接配置されます。以下同様に、最後の要素が削除されます。ドロップがもう1つある場合、1つは削除されます。
（4）インデックス値indexをキー値として使用しないようにし、idなどの一意の識別値を使用するようにしてください。配列インデックスインデックスをキーとして使用する場合、新しい要素が配列の指定された位置に挿入されると、この時点でインデックスインデックスが更新され、後続の仮想DOMに対応するキー値がすべて更新されます更新されます。現時点では不要です。更新はキーが追加されていないのと同じであるため、インデックスはキーの競合の問題を解決できますが、再利用の状況を解決することはできません。静的データの場合は、インデックス番号インデックスをキー値として使用しても問題ありません。
（5）ラベル名が同じ場合は、この時点でキーが再利用されます。ラベル名が異なる場合は、キーは再利用されません。

3. Vueコンポーネントのライフサイクルを説明します（親子コンポーネントを含む）

レンダリングプロセスをロードする
親beforeCreate—>親作成—>親beforeMount —>子beforeCreate —>子作成—>子beforeMount —>子マウント—>親マウント子
コンポーネント更新プロセス
親beforeUpdate —>子beforeUpdate —>子更新—>親が更新された
親コンポーネントの更新プロセス
親beforeUpdate—>親が更新された
破棄プロセス
親beforeDestroy —>子beforeDestroy —>子が破棄されました—>親が破棄されました

4.Vueコンポーネントはどのように通信しますか

Vueコンポーネント間の通信は、大きく次のタイプに分類できます。

props属性を使用します。

小道具は主に親コンポーネントが子コンポーネントにデータを渡すために使用します。コンポーネントにいくつかのカスタム機能を登録できます。値がpropプロパティに渡されると、そのコンポーネントインスタンスのプロパティになります。この値はサブコンポーネントで使用できます。注意：すべてのプロップは、親プロップと子プロップの間に一方向の下方バインディングを形成します。つまり、親プロップの更新は子コンポーネントに流れますが、その逆は機能せず、子コンポーネントは状態を変更できません。親コンポーネントの。

親コンポーネントが更新されるたびに、子コンポーネントのすべての小道具が最新の値に更新されます。

次の例で示されています。

ここに画像の説明を挿入します

親コンポーネントのTodoListコンポーネントを参照し、：todos（v-bind：todos）を使用して配列を渡し、：deleteTodoを使用して関数を渡し
ここに画像の説明を挿入します
、子コンポーネントのpropsを使用して着信パラメーターを受け取り、それを使用しますこのコンポーネントで。データで定義する必要はありません。関数を子コンポーネントに渡す場合、子コンポーネントは親コンポーネントの値を変更する必要がありますが、それ自体を変更することはできません。特定の値（配列の添え字など）のみを渡すことができます。親に渡さないでください。コンポーネント、操作を更新するように親コンポーネントに通知します（たとえば、配列内の要素を削除します）。

Vueカスタムイベントを使用します。

それを使用する方法？

親コンポーネントは、v-onを直接使用して、子コンポーネントが使用されている子コンポーネントによってトリガーされたイベントをリッスンできます。つまり、v-onを使用して親コンポーネントのカスタムイベントをバインドしてから、$ emit（eventName、data）を使用して子コンポーネントのイベントをトリガーします。次のように使用します。

addTodoは関数であり、関数の特定のコンテンツは表示されなくなり、イベントは子コンポーネントの$ emitによってトリガーされます。
ここに画像の説明を挿入します
注意：この方法は、親子コンポーネントの転送にのみ使用され、3層以上には適用されません。

各Vueオブジェクトインスタンスはイベントインターフェイスを実装しているため、 $O n- （ E V E n- T N A m E ）スーパーバイザーが何かのメンバーをリッスンし、$ emitトリガーイベント $を$ $使用します$ 。

親要素がマウントされると、サブアセンブリをバインドするためのイベントリスナー：

サブアセンブリが$イベントによって発行またはトリガーされます。
メッセージのサブスクリプションと公開（PubSubJSライブラリ）

メッセージをサブスクライブしますPubSub.subscribe（ 'msg'、function（msg、data）{}）

パブリッシュメッセージ：PubSub.publish（ 'msg'、data）

注：最初にPubSubコンポーネントをインポートします。「pubsub-js」からPubSubをインポートします。

// 订阅消息   
//PubSub.subscribe('deleteTodo',function(msg,data){ 
 //     this.deleteTodo(index) ; 
 // 这样是存在问题的，是因为this使用的是回调函数中的，并不是外部的this ，于是，可以使用箭头函数，将外部this绑定
//})
PubSub.subscribe('deleteTodo', (msg,data) =>{
    
    // 箭头函数，绑定的是外部的this
  this.deleteTodo(index); 
})

別のコンポーネントでメッセージを公開します。

// 注意先导入 PubSub
 
PubSub.publish('deleteTodo',index) // indx 为传入的数据

注：1）利点：この方法では、任意のリレーショナルコンポーネント間の通信（データ）を実現できます。

コンポーネント間の通信：スロット

このメソッドは、親コンポーネントが「ラベルデータ」を子コンポーネントに渡すために使用します。つまり、子コンポーネントには最初に「プレースホルダー」があり、親コンポーネントが特定のラベルを渡すのを待っており、子コンポーネントがレンダリングしています。

使用法：

サブアセンブリ：

// 子组件  ：Child.vue
<template>
   <div>
      <slot name="xxx"> 不确定的标签结构1</slot> <!--定义架子，我理解为定义一个占位符 -->
      <div> 组件确定的标签结构</div>
      <slot name="yyy">不确定的标签结构2</slot>
   </div>
</template>

親コンポーネント：

// 父组件：Parent.vue
<child>
   <div slot="xxx">xxx对应的标签结构</div> <!-- 实际的标签结构-->
<div slot="yyy">yyy对应的标签结构</div> <!-- 实际的标签结构-->
</child>

注：渡される特定のラベルは親コンポーネントにあるため、操作も親コンポーネントに配置する必要があります。つまり、子コンポーネントは親コンポーネントの実行後に渡され、そのすべての操作は親コンポーネントで実行される必要があります。

以下に示すように、子コンポーネントに対するこれらの操作はすべて親コンポーネントに組み込まれます。
ここに画像の説明を挿入します

5.コンポーネントのレンダリングと更新のプロセスを説明します

1.vueコンポーネントの初期レンダリングプロセス

テンプレートをレンダリング関数に解析します

応答をトリガーし、データプロパティのゲッターとセッターを監視します

レンダリング関数を実行してvnode、patch（elem、vnode）を生成します

2.Vueコンポーネントの更新プロセス

データを変更し、セッターをトリガーします（以前はゲッターで監視されていました）

レンダリング関数を再実行して、newVnodeを生成します

patch（vnode、newVnode）
ここに画像の説明を挿入します

5.双方向データバインディングvモデルの実現原理

vueのvモデルは双方向バインディングを実現できます。その中心的なアイデアはObject.defineProperyを介してVueデータをハイジャックすることです。これは
主に3つの部分に分かれています。
オブザーバーは主にVueデータのデータハイジャックを担当します。get and setメソッド
命令パーサーはデータと命令のバインディングを担当し、メソッド
ウォッチャーを更新するバインディングの試みはデータの監視を担当します。データが変更されると、サブスクライバーに通知され、ビュー更新関数が呼び出されて見る。