vue 抽象構文ツリーと仮想 dom の違いは何ですか

vue 抽象構文ツリーと仮想 dom の違い: 1. 抽象構文ツリーはソース コード構文構造の抽象表現を指しますが、仮想 dom は本質的にビューを記述するために使用される通常の JS オブジェクトです。構造; 2. 仮想 DOM はオブジェクトの形式での実際の DOM の抽象表現ですが、抽象構文ツリーは構文構造の抽象表現です。

このチュートリアルの動作環境: Windows 10 システム、Vue3 バージョン、Dell G3 コンピューター。

vue 抽象構文ツリーと仮想 dom の違いは何ですか

仮想 dom

仮想ドームとは何ですか?

仮想 dom は本質的に、ビューのインターフェイス構造を記述するために使用される通常の JS オブジェクトです。

vue では、各コンポーネントにはレンダリング関数があり、各レンダリング関数は仮想オブジェクトを返します。 DOM ツリー。これは、各コンポーネントが仮想 DOM ツリーに対応することを意味します。

なぜ仮想 DOM が必要なのでしょうか?

vue では、ビューをレンダリングすると render 関数が呼び出されます。このレンダリングは、コンポーネントの作成時だけでなく、ビューが依存するデータの更新時にも行われます。レンダリング時に実際の DOM を直接使用すると、実際の DOM の作成、更新、挿入などの操作によりパフォーマンスが大幅に低下し、レンダリング効率が大幅に低下します。

したがって、Vue は、主にレンダリング効率の問題を解決するために、レンダリング時に仮想 dom を使用して実際の dom を置き換えます。

#抽象構文ツリー

##コンピュータ サイエンスにおける抽象構文ツリー (AST)、または略して構文ツリーは、ソース コードの文法構造を抽象的に表現したものです。プログラミング言語の文法構造をツリー形式で表現しており、ツリー上の各ノードはソースコードの構造を表します

仮想 dom と ast の違い:

仮想 dom と ast (抽象構文ツリー) はどちらもページ レンダリングに関係します。私が最初に学習し始めたとき、この 2 つをよく混同しました。実際、これらはまったく異なる概念です。どちらも抽象表現にオブジェクトを使用しますが、仮想 dom はオブジェクトの形で現実の dom を抽象表現するのに対し、ast は文法構造の抽象表現です。

抽象構文ツリーの終点はレンダリング関数 (h 関数) です。

レンダリング関数 (h 関数)。AST の産物であり、vnode (仮想ノード) の起源でもあります。 h 関数には命令がありません。

抽象構文ツリーは diff アルゴリズムを実行せず、抽象構文ツリーは仮想ノードを直接生成しません。抽象構文ツリーは最終的にレンダリング関数を生成します。

[関連する推奨事項: "

vue.js チュートリアル >>]

以上がvue 抽象構文ツリーと仮想 dom の違いは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。