就活第4弾～Vue対面体験～

1. Vueのライフサイクル

1. ライフサイクルの定義: Vue インスタンスの作成から破棄までのプロセスがライフサイクルです。つまり、作成開始からデータの初期化、テンプレートのコンパイル、Domのマウント→レンダリング、更新→レンダリング、アンロードなどの一連の処理をVueのライフサイクルと呼びます。

2.具体内容：

作成前：

对应的钩子函数为beforeCreate。此阶段el和data都还没有形成。

作成した：

在这个阶段vue实例已经创建，仍然不能获取DOM元素。

created可以获取到props、data中定义的值。但是el还没有形成。所以也没有渲染DOM。

マウント前：

但是el和data都已经存在了，只是还未挂载。页面呈现的是未经编译的DOM结构，所有对DOM的操作，都不奏效。

搭載：

mounted是平时我们使用最多的函数了，一般我们的异步请求都写在这里。在这个阶段，数据和DOM都已被渲染出来。

此时，页面中呈现的是Vue编译后的DOM，对DOM的操作有效，但是要避免对DOM的操作。至此初始化结束。我们可以在这个阶段，开启定时器、发送网络请求、订阅消息、绑定自定义事件等。

更新前：

当数据发送改变，页面尚未和数据保持同步。数据新，页面旧。

更新しました：

数据是新的，页面也是新的，页面和数据保持同步。

破壊前：

销毁前，关闭定时器，取消订阅消息，解绑自定义事件等收尾操作。

破壊されました：

销毁了。

销毁后借助Vue开发者工具无法看到任何信息；
自定义事件失效；
一般不会再操作注册，即使操作数据，也不会再触发更新流程。

3.一般的なライフサイクル:
マウント: Ajax リクエストの送信; タイマーの開始; カスタム イベントのバインド; メッセージのサブスクライブなど;
beforeDestroy: タイマーのクリア; カスタム イベントのバインド解除; メッセージのサブスクライブ解除など;

コンポーネント内にサブコンポーネントがある場合、サブコンポーネントは親コンポーネントがマウントされる前にマウントされ、親コンポーネントが更新される前に更新され、親コンポーネントが破棄される前に破棄されることに注意してください。

4. ページが初めて読み込まれるときに、
beforeCreate、Created、beforeMount、Mounted をトリガーします。

5. $nextTick: データ更新後すぐに DOM を操作します。

2. 応答原則

Vue2 の応答原理の鍵となるのは Object.defineProperty です。これはデータ内のプロパティを再定義し、データの取得と設定のインターセプト関数を設定します。セッターが更新されると、対応する依存関係にビューを更新するように通知されます。応答性を実現するため。

Vue3 の応答原理では、Proxy オブジェクトのプロキシ オブジェクト内のすべてのプロパティが使用されます。

3. ルーティングキャッシュ

アプリケーションの効率を向上させるために、ルート キャッシュを改善できます。

キャッシュ方式：キープアライブタグ。

router-view をタグ内に配置すると、単純なデータ キャッシュが可能になります。

    <keep-alive>
        <router-view></router-view>
    </keep-alive>

keep-alive には include 属性があり、これを使用して個々のコンポーネントのデータをキャッシュできることに注意してください。含める、その後に続くコンポーネント名、複数コンポーネントの場合は、コンポーネント名の配列が続きます。

ルーティング コンポーネントのライフサイクル機能には、アクティブ化されたものと非アクティブ化されたものがあることにも注意してください。これら 2 つのライフ サイクル機能を通じて、2 つの主要な基本コンポーネントのライフ サイクル機能を実装できます。つまり、メッセージ コンポーネントが表示されたときにタイマーをアクティブにし、メッセージ コンポーネントが切り取られたときにタイマーを破棄します。

4. 仮想DOMにおけるキーの役割

キーは仮想 DOM のオブジェクト識別子です。状態内のデータが変更されると、Vue は新しいデータに従って新しい仮想 DOM を生成します。その後、Vue は新しい仮想 DOM を古い仮想 DOM と比較します。

新しい仮想 DOM と同じキーが古い仮想 DOM にあります。仮想 DOM の内容が変更されていない場合は、実際の DOM が直接使用されます。仮想 DOM の内容が変更されている場合は、新しい仮想 DOM が使用されます。が生成されると、ページ上の以前の DOM が置き換えられます。

キーを選択する場合:
各データの一意の識別子をキーとして使用するのが最善です。順序を破壊する操作はなく、表示用にリストをレンダリングするためにのみ使用され、インデックスも使用できます。

5. 差分比較アルゴリズム

理論的には、Vue の応答性により、データが変更されるとテンプレートが再レンダリングされます。アプリケーションのパフォーマンスを向上させるために、DOM を完全にレンダリングする必要がない場合があります。これは diff アルゴリズムと切り離すことができません。

現在は仮想DOMに相当し、データが更新されると新たな仮想DOMが生成されます。キーを仮想 DOM のオブジェクト識別子として使用して、2 つの仮想 DOM が比較され、比較対象のノードのノードからノードが抽出されます。これは、グラフの深さ優先トラバーサル アルゴリズムに相当します。1 対 1 の比較。古い仮想 DOM が見つからない場合は追加され、古い仮想 DOM が大きすぎる場合は削除されます。

上記の手順を完了してから、以前のベースに基づいてレンダリングすると、速度が速くなり、パフォーマンスが向上します。

6. MVVMとMVC

MVVM、モデル-ビュー-ビューモデル。モデル-ビュー-ビューモデル。

MとVはVMのブリッジを介して接続されており、モデルとビューの分離を実現しています。また、MV 間の通信には双方向バインディングが使用され、V->M では Dom イベント監視が使用され、M->V ではデータの一方向バインディングが使用されます。

MVC は一方向通信であり、V->M は通信を実現するためにコントローラーを使用する必要があります。

両者の最大の違いはMVVMがデータ同期を実現していることです。DOM 要素を手動で変更する必要はなく、DOM 要素は自動的に同期されます。

7. Vue 開発を選択する理由

使いやすく、成熟したドキュメントとチュートリアルがあり、すぐに習得できます。

多くのコンポーネント ライブラリ、豊富なスタイル、優れたエフェクトがあります。

足場建設プロ​​ジェクトは非常に便利です。

コンポーネントの再利用性が高く、パフォーマンスが高く、動作が高速です。

8. コンポーネント間での値の受け渡し

親子コンポーネントは値を渡し、親コンポーネントはデータの一方向バインディングを使用し、子コンポーネントの props 宣言は受け入れます。孫コンポーネントは
値を渡し、祖先コンポーネントは Provide を使用してデータを提供し、孫コンポーネントは Inject を使用してデータを受け取ります。

子-親コンポーネントの値、カスタム イベントの受け渡し。親コンポーネントで子コンポーネントのカスタム イベントを設定します。子コンポーネントは、emit を使用してカスタム イベントをトリガーし、データを親コンポーネントに渡します。子は ref を使用して、値を
parentに渡し、親コンポーネントの子コンポーネントにrefを設定し、$refsを介して子コンポーネントにカスタムイベントをバインドし、子コンポーネントでトリガーします。親コンポーネントは子コンポーネントから値を受け取ることもできます。成分。

イベント カー $bus はこのようにコンポーネントを共有できます。原則として、イベント カーを Vue のプロトタイプに配置し、すべてのコンポーネントがそれにアクセスできます。Vuex は
兄弟コンポーネント間の値の転送も実現できます。

9. コンポーネントの定義

まず、Components フォルダーに vue ファイルを定義します。

グローバルに、または単一のコンポーネント内で導入および名前を付けます。

上記の名前をタグ名としてコンポーネントに適用します。

10. プラグインの使用

プラグインを使用するには、まず npm を通じてプラグインをダウンロードします。

次に、main.js で Vue.use() を使用します。

11. scssの使用

Scaffolding は scss を自動的にインストールできます。

インストール後、styleタグの後ろにscssを付けて使用してください。少ない場合も同様です。

12. Vueのスケルトン画面について語る

スケルトン画面の機能は、弱いネットワークでのユーザー エクスペリエンスを最適化することです。ユーザーネットワークが貧弱な場合、クリックするとページのスケルトンが表示されます。

方法 1。ID が app であるテンプレート ファイルに、目的の HTML 効果を書き込みます。

スケルトン画面はプラグインにより自動描画可能です。

13. 各コンポーネントのスタイルは相互に影響しません。

スコープ付き属性を追加するだけです。

14.v-ifとv-show

その後に条件判断文が続きます。

ただし、要素を非表示にしたり表示したりするための操作原理は異なります。v-show は表示を通じて要素を表示および非表示にし、v-if は要素を直接破棄または再構築します。

15. v-if を v-for と一緒に使用できないのはなぜですか

これら 2 つの優先順位は vue2 と vue3 で異なるため、混同しやすいです。したがって、使用する場合は注意してください。

16. Vuex の関連レビュー

1.vuexとは何ですか?
vue での状態管理とデータ共有。

2. vuex の属性: 状態、ミューテーション、アクション、ゲッター

3. 属性の役割:
state は一般的な Vue オブジェクト内のデータに対応するデータ ソースの保存場所です。
ゲッターは Store の計算属性である State に対して計算操作を実行できます。mutation は
データの同期操作を内部的に保存します。呼び出しには通常 $store .commit を使用します。
アクションは非同期操作を内部に保存し、非同期操作は操作用のコミットを使用してミューテーションに送信され、通常は $store.dispatch で呼び出されます。

17. ルーティングパラメータ

用途:
動的ルーティング、
名前のマッチング、parme パラメーターの受け渡し、
パスのマッチング、クエリ パラメーターの受け渡し。

query は ajax の get パラメータに似ており、params は post に似ており、簡単に言うと、前者はブラウザのアドレス バーにパラメータを表示しますが、後者はパラメータを表示しません。

18.計算、監視、メソッド

メソッド: 主に、特定の操作であるビジネス ロジックを記述するために使用されます。は関数呼び出しです。

computed: computed で定義されたメソッドは属性アクセスの形式で呼び出され、属性の結果がキャッシュされます。依存する応答属性が変更されない限り、再計算され、主に属性として使用されます。

計算キャッシュの原理: 計算キャッシュを制御する最も重要な点は、ダーティ データがダーティとしてマークされ、ダーティはウォッチャーの属性であることです。

watch オブジェクト。キーは監視対象の式、値は対応するコールバック関数です。これは主に、特定のビジネス ロジック操作を実行するために、特定のデータの変更を監視するために使用されます。キャッシュされません。watch を使用して非同期操作を実行することもできます。

19.次のティック

vue の nextTick は主に、データが動的に変更された後に DOM の更新が間に合わない問題に対処するために使用され、nextTick を使用してデータ更新後の最新の DOM 変更を取得できます。

次の dom 更新データの後に呼び出されるコールバック関数を遅らせます。

20.Vue.use()

Vue.use は、いくつかのプラグインをインストールするために使用されます。グローバル メソッド Vue.use() を通じてプラグインを使用すると、Vue.use は同じプラグインの複数の登録を自動的に防止します。

21. 共通リクエストヘッダー、レスポンスヘッダー

リクエストヘッダー。サーバーが使用する追加情報を記述するために使用されます。

Accept, リクエスト ヘッダー フィールドは、クライアントが受け入れることができる情報の種類を指定するために使用されます。

Accept- language は、クライアントが受け入れられる言語タイプを指定するために使用されます。

ホスト、ホスト IP およびポート番号。

リファラー、このコンテンツはリクエストの送信元ページを識別するために使用され、サーバーはこの情報を取得し、ソース統計などの対応する処理を実行できます。 、抗リーチ加工など。

応答ヘッダー。応答のデータを記述するために使用されます。

Content-Language は、コンテンツで使用される言語に影響します。

Content-Length、応答メッセージ本文の長さ。

22. h5 とアプリ間の端末間インタラクション

独自の方法があります。

23.