Vue的編譯過程

2022-10-06 18:15:11 字數 2543 閱讀 9908

碰到是否有template選項時,會詢問是否要對template進行編譯:

template編譯(渲染成ui)有乙個過程。模板通過編譯生成ast,再由ast生成vue的渲染函式,渲染函式結合資料生成virtual dom樹,對virtual dom進行diffpatch後生成新的ui。將上圖細化一下,也就是template編譯的過程如下圖所示:

在深入一點,如下:

有關於vue中template的渲染的詳細過程,可以閱讀《vue的模板》一文。

簡理的理解就是vue中的template編譯成瀏覽器可識的過程會經過不少的過程。言外之意,最終在瀏覽器中呈現的並不是,而是會解析成標準的html,然後將元件的標籤替換為對應的html片段。用個小示例來舉例:

vue將會通過其自身的編譯機制(如前圖所示的過程),將編譯成讓瀏覽器可以識別的html**。可以借助瀏覽器開發者工具一**竟:

我們要說的是模板編譯的作用域,在vue中,元件是有乙個作用域的:元件模板(內的就是元件作用域,而其之外的就不是元件的作用域了,比如上面的示例,my-component元件的作用域就是下面這部分:

通俗地講,在子元件中定義的資料,只能用在子元件的模板。在父元件中定義的資料,只能用在父元件的模板。如果父元件的資料要在子元件中使用,則需要子元件定義props

碰到是否有template選項時,會詢問是否要對template進行編譯:

template編譯(渲染成ui)有乙個過程。模板通過編譯生成ast,再由ast生成vue的渲染函式,渲染函式結合資料生成virtual dom樹,對virtual dom進行diffpatch後生成新的ui。將上圖細化一下,也就是template編譯的過程如下圖所示:

在深入一點,如下:

有關於vue中template的渲染的詳細過程,可以閱讀《vue的模板》一文。

簡理的理解就是vue中的template編譯成瀏覽器可識的過程會經過不少的過程。言外之意,最終在瀏覽器中呈現的並不是,而是會解析成標準的html,然後將元件的標籤替換為對應的html片段。用個小示例來舉例:

vue將會通過其自身的編譯機制(如前圖所示的過程),將編譯成讓瀏覽器可以識別的html**。可以借助瀏覽器開發者工具一**竟:

我們要說的是模板編譯的作用域,在vue中,元件是有乙個作用域的:元件模板(內的就是元件作用域,而其之外的就不是元件的作用域了,比如上面的示例,my-component元件的作用域就是下面這部分:

通俗地講,在子元件中定義的資料,只能用在子元件的模板。在父元件中定義的資料,只能用在父元件的模板。如果父元件的資料要在子元件中使用,則需要子元件定義props

編譯的過程

編譯的概念 編譯程式讀取源程式 字元流 對之進行詞法和語法的分析,將高階語言指令轉換為功能等效的彙編 再由匯程式設計序轉換為機器語言,並且按照作業系統對可執行檔案格式的要求鏈結生成可執行程式。編譯的完整過程 c源程式 預編譯處理 c 編譯 優化程式 s asm 匯程式設計序 obj o a ko 鏈...

編譯原理 編譯的過程

預處理 prepressing 展開巨集定義 處理 define,include 刪除注釋,新增行號和檔名標識。生成.i 預處理檔案 編譯 compilation 詞法分析 語法分析 語義分析 優化。預處理 編譯用ccl完成。生成.s 彙編 檔案 彙編 assembly 把彙編 轉成機器可執行的指令...

編譯 Ares Galaxy 的過程

首先就是回到俺以前的delphi7上,要不是2006所帶的重構工具和ide實在太誘人,俺還是覺得delphi7的介面友好,大概是習慣的緣故吧。下面開始漫漫的安裝控制項的歷程。開始編譯,上來就報少了什麼屬性。webbrower,這不是delphi自帶的控制項嘛。先cancel再說,編譯少shdocvw...