區(qū)別介紹

• 源碼采用?monorepo?方式進行管理，將模塊拆分到package目錄中

• Vue3?采用ts開發(fā),增強類型檢測。?Vue2?則采用flow

• Vue3的性能優(yōu)化，支持tree-shaking, 不使用就不會被打包

• Vue2?后期引入RFC , 使每個版本改動可控?rfcs

• Vue3?劫持數(shù)據(jù)采用proxy?Vue2?劫持數(shù)據(jù)采用defineProperty。?defineProperty有性能問題和缺陷

• Vue3中對模板編譯進行了優(yōu)化，編譯時 生成了Block tree，可以對子節(jié)點的動態(tài)節(jié)點進行收集，可以減少比較，并且采用了?patchFlag?標記動態(tài)節(jié)點 jsx

• Vue3?采用compositionApi?進行組織功能，解決反復(fù)橫跳，優(yōu)化復(fù)用邏輯 （mixin帶來的數(shù)據(jù)來源不清晰、命名沖突等）, 相比optionsApi?類型推斷更加方便

• 增加了?Fragment,Teleport，Suspense組件

一.Vue3架構(gòu)分析

#1.Monorepo介紹

Monorepo?是管理項目代碼的一個方式，指在一個項目倉庫(repo)中管理多個模塊/包(package)

• 一個倉庫可維護多個模塊，不用到處找倉庫

• 方便版本管理和依賴管理，模塊之間的引用，調(diào)用都非常方便

缺點：倉庫體積會變大。

#2.Vue3項目結(jié)構(gòu)

• reactivity:響應(yīng)式系統(tǒng)

• runtime-core:與平臺無關(guān)的運行時核心 (可以創(chuàng)建針對特定平臺的運行時 - 自定義渲染器)

• runtime-dom: 針對瀏覽器的運行時。包括DOM API，屬性，事件處理等

• runtime-test:用于測試

• server-renderer:用于服務(wù)器端渲染

• compiler-core:與平臺無關(guān)的編譯器核心

• compiler-dom: 針對瀏覽器的編譯模塊

• compiler-ssr: 針對服務(wù)端渲染的編譯模塊

• compiler-sfc: 針對單文件解析

• size-check:用來測試代碼體積

• template-explorer：用于調(diào)試編譯器輸出的開發(fā)工具

• shared：多個包之間共享的內(nèi)容

• vue:完整版本,包括運行時和編譯器

3.安裝依賴

4.workspace配置

目錄結(jié)構(gòu)配置

配置模塊名稱及打包選項

創(chuàng)建軟鏈yarn install

二.構(gòu)建環(huán)境搭建

1.對packages下模塊進行打包

scripts/build.js

2.rollup配置

rollup.config.js

3.開發(fā)環(huán)境打包