インタビュアーは突然「Vue2 と Vue3 の違いは何ですか?」と尋ねました。

まえがき

現在、フロントエンドが死んだというとんでもない噂がネット上で流れていますが、実はその本質的な理由は、人員が増えて役職が減り、それが原因であるということです。競争圧力の増大につながった。

私たちには社会に存在する問題を解決する方法はありませんが、競争力を高めるために自分たちから始めることはできます。

複数の人がポジションを争う場合、彼らは 1 位だけを求めているため、実際には 2 位と最下位に差はありません。

したがって、すべての質問に 100 点で答えることが非常に重要です。

「たった一つの質問が面接官を混乱させる」を書いた理由もこれです。

このトピックは、誰もが各質問で 100 点を獲得し、最短時間で面接官を「征服」できるようにすることを目的としています。手にした面接のチャンスを大切にして、皆さんも一日も早く高収入で好きな会社に入社してください。

「vue2とvue3の違いは？」と聞かれたらどう答えるべきか

Vue 内部的には関数に基づいています: 応答性reactivite、ランタイムruntime、エディタコンパイラー##の3つの大きなモジュールに分割できます。 #、およびいくつかの小さな関数ポイント。したがって、vue2 と vue3 の違いについて説明するには、これら 3 つの側面から始めて、より小さな機能ポイントを追加する必要があります。

まず第一に、

応答性reactivite:

vue2の応答性は主にに依存します。 Object.defineProperty 実装ですが、Object.defineProperty は ## の指定されたプロパティの getter 動作と setter 動作 のみを監視できます。 #specified object, then これにより、場合によっては問題が発生する可能性があります。 ＃＃＃＃＃＃どうしたの？ 例:

data

でオブジェクト

person

を宣言しましたが、後で person に新しい属性を追加すると、この新しいプロパティの応答性が失われます。 。この問題を解決するのは実際には非常に簡単で、Vue.$set メソッドを使用して、指定されたオブジェクトの指定された属性の 応答性 を向上させることができます。しかし、Vue の自動応答機構では、そのような方法は無理があります。 したがって、Vue3 では、

Vue

でリフレクションとプロキシの概念が導入されています。いわゆるリフレクションとは、Reflect を指します。呼び出されるプロキシは Proxy を指します。 Proxy を使用すると、共通オブジェクトを直接プロキシし、プロキシ インスタンス プロキシ オブジェクトを取得できます。 vue3 では、このプロセスは reactive メソッドを通じて実装されます。 ただし、proxy はプロキシの複雑なデータ型のみを実装できるため、

vue

は、単純なデータ型の性別の応答を処理する追加の ref メソッドを提供します。 ref 本質的には、データを監視するのではなく、set および get ## を通じて # とマークされた RefImpl クラスを構築します。 value このようにして関数が実装されます。したがって、ref は .value を通じてトリガーされる必要があります。これの本質は、value メソッド を呼び出すことです。 次は runtimeruntime

:

いわゆるランタイムです。ほとんどの場合、renderer renderer を指します。レンダラーは本質的にオブジェクトであり、3 つの主要な内部メソッド render、ハイドレート、createApp

を備えています。そのうち

render は主にレンダリング ロジックを処理し、ハイドレート は主にサービスを処理します。 レンダリングの終了createApp は vue インスタンスを作成するメソッドです。 ここでは主に render レンダリング関数 について説明します。ホスト環境とレンダリング ロジックを確実に分離するために、ホスト環境に関連するすべてのロジックは vue3 に抽出されます。

分離され、インターフェイスの形式で渡されます。この目的は実際には、ホスト環境とレンダリング ロジックのバインドを解除して、

vue がブラウザ以外のホスト環境で正常にレンダリングできるようにすることです。 さらに下には Editorcompiler

があります:

vue の compiler

は実際には ## です#DSL (特定のドメインの専用言語エディタ)

。その目的は、template テンプレートを render 関数にコンパイルすることです。ロジックは主に、解析、変換、生成という 3 つの主要なステップに分かれています。 parse の機能は、template を AST (抽象構文ツリー) に変換することです。transform は、AST (抽象構文ツリー) を変換できます。ツリー) 構文ツリー) は JavaScript AST に変換され、最後に generate は JavaScript AST を render 関数 に変換します。変換プロセスには、有限自動ステート マシンなどの少し複雑な概念が含まれますが、ここでは説明しません。

さらに、他にもいくつかの変更があります。たとえば、vue3 の新しい composition API です。 composition API は、vue3.0 と vue3.2 でいくつかの異なるプレゼンテーションを持ちます。たとえば、元の composition API は # で始まります。 ##setup この関数はエントリ関数として機能します。 setup この関数は 2 種類の値を返さなければなりません: 1 つ目はオブジェクト、2 つ目は関数です。

setup 関数がオブジェクトを返すと、オブジェクト内のデータまたはメソッドを template で使用できます。 setup 関数が関数を返す場合、その関数は render 関数として扱われます。

しかし、この

setup 関数の形式は良くありません。すべてのロジックが setup 関数に集中しており、巨大な ## が発生しやすいからです。 #setup 関数。これを Boulder (Shit Mountain) 関数と呼びます。そのため、vue 3.2 では、この問題を解決するために、script setup という新しい構文シュガーが追加されました。現時点では、スクリプトのセットアップのプレゼンテーションはまだ非常に優れています。 さらに、

フラグメント、テレポート、サスペンス

などの小さな変更がいくつかあります。詳細については説明しません...推奨される学習: 《

vue.js ビデオ チュートリアル

》

以上がインタビュアーは突然「Vue2 と Vue3 の違いは何ですか?」と尋ねました。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。