vue2 5原始碼分析

2021-10-10 06:22:28 字數 855 閱讀 4094

原始碼目錄設計:

compiler:包含vue.js所有編譯相關的**。包括把模板解析成ast語法樹,ast語法樹優化,**生成。。。

core:核心**。包括內建元件、全域性api封裝、vue例項化、觀察者、虛擬dom、工具函式。。

platform:vue.js的入口。兩個目錄代表兩個主要路口,分別打包成執行在web和weex上的vue.js.

server:服務端渲染。**是跑在服務端渲染的node.js。把元件渲染為服務端的html字串,直接傳送到瀏覽器。

sfc:把.vue檔案內容解析成乙個js的物件。

shared:被瀏覽器端和服務端的vue.js所共享的工具方法。

構建指令碼

package.json:專案的描述檔案。配置的script欄位作為npm的執行指令碼。

構建過程

在scripts/build.js中。

對於單個配置,它是遵循 rollup 的構建規則的。其中 entry 屬性表⽰構建的⼊⼝ js ⽂件地 址, dest 屬性表⽰構建後的 js ⽂件位址。 format 屬性表⽰構建的格式, cjs 表⽰構建出來的 ⽂件遵循 commonjs 規範, es 表⽰構建出來的⽂件遵循 es module 規範。 umd 表⽰構建出來的⽂ 件遵循 umd 規範。

推薦使runtime-only 的 vue.js。因為渲染都是通過 render 函式,如果寫 template 屬性,則需要編譯成 render 函式,損耗效能。

vue 例項掛載的實現

是通過 $mount 例項⽅法去掛載 vm 的.

vue2 5入門 基礎語法

1.vue基本介紹 三大主流前端框架 angular react vue 2.基礎知識 案例實戰 todolist vue cli todolist 3.建立第乙個vue例項 lang en charset utf 8 vue入門title src script head id root div v...

Vue原始碼分析

在開始原始碼分析工作之前,我們在當前篇章做好相應的準備工作,以便更好地展開分析。將原始碼fork到自己的github倉庫中 git clone 自己的github vue 位址 dist 打包之後的結果 examples 示例 src compiler 編譯相關 core vue 核心庫 compo...

Vue原始碼分析(流程分析)

使用步驟 1.編寫 頁面 模板 1.直接在html標籤中寫 2.使用template 3.使用單檔案 2.建立vue例項 1.在vue 的建構函式中 data,methods,computer,watcher,props,3.將vue掛載到頁面中 mount 資料驅動模型 vue執行流程 1.獲得模...