vue2 0和3 0的區別

2021-10-19 23:39:46 字數 1446 閱讀 6773

proxy 物件用於建立乙個物件的**,從而實現基本操作的攔截和自定義(如屬性查詢、賦值、列舉、函式呼叫等)。

/* vue2.0*/

var a =

;object.

defineproperty

(a,'b',}

)//只能獲取到newvalue這個引數

/* vue3.0 */

var a=

;var newa =

newproxy

(a,}

)//可以獲取到target,key,newvalue三個引數

•模板編譯時的優化,將一些靜態節點編譯成常量

•slot優化,將slot編譯為lazy函式,將slot的渲染的決定權交給子元件

•模板中內聯事件的提取並重用(原本每次渲染都重新生成內聯函式)

4.**結構調整,更便於tree shaking(實際情況中,雖然依賴了某個模組,但其實只使用其中的某些功能。通過 tree-shaking,將沒有使用的模組搖掉,這樣來達到刪除無用**的目的。),使得體積更小

5.使用typescript替換flow

vue2需要diff所有的虛擬dom節點,而vue3參考了svelte框架的思想,先分層次-然後找不變化的層-針對變化的層進行diff,更新速度不會再受template大小的影響,而是僅由可變的內容決定。經過尤雨溪自己的測試,大概有6倍的速度提公升。

vue3的原始碼開始採用了ts進行編寫,給開發者也提供了支援ts的開發模式。

vue3最開始的版本可以完美相容vue2的api。

從原始碼的層面上提供了更多的可維護能力。

把更多的底層功能開放出來,比如render、依賴收集功能,我們可以更好的進行自定義化開發,可以寫更多的高階元件。

vue2.0中,隨著功能的增加,元件變得越來越複雜,越來越難維護,而難以維護的根本原因是vue的api設計迫使開發者使用watch,computed,methods選項組織**,而不是實際的業務邏輯。

另外vue2.0缺少一種較為簡潔的低成本的機制來完成邏輯復用,雖然可以minxis完成邏輯復用,但是當mixin變多的時候,會使得難以找到對應的data、computed或者method**於哪個mixin,使得型別推斷難以進行。

所以composition api的出現,主要是也是為了解決option api帶來的問題,第乙個是**組織問題,compostion api可以讓開發者根據業務邏輯組織自己的**,讓**具備更好的可讀性和可擴充套件性,也就是說當下乙個開發者接觸這一段不是他自己寫的**時,他可以更好的利用**的組織反推出實際的業務邏輯,或者根據業務邏輯更好的理解**。

第二個是實現**的邏輯提取與復用,當然mixin也可以實現邏輯提取與復用,但是像前面所說的,多個mixin作用在同乙個元件時,很難看出property是**於哪個mixin,**不清楚,另外,多個mixin的property存在變數命名衝突的風險。而composition api剛好解決了這兩個問題。

Vue3 0和Vue2 0的區別

vue2和vue3的區別 一 常用命令 vue v 檢視本地 vue 版本 二 官方文件 3.0 三 建立檔案 3.0 vue create 進入工程資料夾,建立專案。2.0 vue init webpack 四 啟動專案 3.0啟動npm run serve 2.0啟動npm run dev 在根...

vue3 0和vue2 0的區別

vue3.0和2.0的區別更小安裝 npm install g vue cli 建立專案檔案 vue create project 專案的名稱 vue2和vue3的區別 一 常用命令 vue v 檢視本地 vue 版本 二 官方文件 3.0 三 建立檔案 3.0 vue create 進入工程資料夾...

Vue2 0和Vue3 0的區別

1.專案目錄結構 vue cli2.0與3.0在目錄結構方面,有明顯的不同 vue cli3.0移除了配置檔案目錄,config和build資料夾 同時移除了static靜態資料夾,新增了public資料夾,開啟層級目錄還會發現,index.html移動到public中 2.配置項 3.0 conf...