首頁 > web前端 > 前端問答 > vue抽象語法樹和虛擬dom的差別是什麼

vue抽象語法樹和虛擬dom的差別是什麼

WBOY
發布: 2022-06-23 17:10:40
原創
2861 人瀏覽過

vue抽象語法樹和虛擬dom的區別:1、抽象語法樹指的是原始碼語法結構的一種抽象表示,而虛擬dom本質上就是一個普通的JS對象,用來描述視圖的介面結構;2、虛擬dom是將真實dom以物件的方式進行抽象表示,而抽象語法樹則是對語法結構的抽象表示。

vue抽象語法樹和虛擬dom的差別是什麼

本教學操作環境:windows10系統、Vue3版、Dell G3電腦。

vue抽象語法樹和虛擬dom的差異是什麼

虛擬dom

什麼是虛擬dom?

虛擬dom本質上就是一個普通的JS對象,用來描述視圖的介面結構

在vue中,每個元件都有一個render函數,每個render函數都會回傳一個虛擬dom樹,這也意味著每個元件都對應一棵虛擬DOM樹

為什麼需要虛擬dom?

在vue中,渲染視圖會呼叫render函數,這種渲染不僅發生在元件建立時,同時發生在視圖所依賴的資料更新時。如果在渲染時,直接使用真實DOM,由於真實DOM的建立、更新、插入等操作會帶來大量的效能損耗,進而極大的降低渲染效率。

因此,vue在渲染時,使用虛擬dom來取代真實dom,主要為解決渲染效率的問題。

抽象語法樹

#在電腦科學中,抽象語法樹(Abstract Syntax Tree,AST),或簡稱語法樹(Syntax tree),是原始碼語法結構的一種抽象表示。它以樹狀的形式表現程式語言的語法結構,樹上的每個節點都表示原始碼中的一種結構

虛擬dom和ast的區別:

虛擬dom和ast即抽象語法樹,都涉及到了頁面渲染,剛開始學習的時候我經常將兩者混淆,其實兩者是截然不同的概念。兩者都是使用物件來進行抽象表示,但是虛擬dom是將真實dom以物件的方式進行抽象表示,而ast則是對語法結構的抽象表示。

vue抽象語法樹和虛擬dom的差別是什麼

抽象語法樹的終點是渲染函數(h函數)。

渲染函數(h函數),它既是AST的產物,也是vnode(虛擬節點)的起源。 h函數裡面是不含指令的。

抽象語法樹不會進行diff演算法的且抽象語法樹不會直接產生虛擬節點,抽象語法樹最終產生的是渲染函數的

【相關推薦:《 vue.js教程》】

#

以上是vue抽象語法樹和虛擬dom的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
vue
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板