vue3 0學習第一天 vue3 0的亮點

2021-10-10 01:25:13 字數 1591 閱讀 5914

-performance:效能比vue2.x快1.2~2倍

-tree shaking support:按需編譯,體積比vue20x更小

-compostion api:組合api

-better typescript support:更好的ts支援

-custom renderer api:暴露了自定義渲染的api

-fragment,teleport,suspense:更先進的元件

+vue2.0中的虛擬dom是進行全量的對比

+vue3新增了靜態標記

在與上次虛擬節點進行對比時候,只對比帶有patch flag的節點

並且可以通過flag的資訊得知當前節點要對比的具體內容

看圖我們可以知道

+vue2中無論元素是否參與更新,每次都會重新建立

+vue3中對於不參與更新的元素,只會被建立一次,之後再每次渲染的時候被不停的重用

靜態提公升之前

靜態提公升之後

+預設情況下onclick會被視為動態繫結,所以每次都會去追蹤它的變化

但是因為是同乙個函式,所以沒有追蹤變化,直接快取起來復用即可

+當有大量靜態的內容時候,這些內容會被當做純字串推進有個buffer裡面;

即使存在動態的繫結,會通過模板插值嵌入進去,這樣會比通過虛擬dom渲染來的快上很多很多

+當靜態內容大到一定量級時候,會用_createstaticvnode方法在客戶啊短去生成乙個static node,

這些靜態node,會被直接innerhtml,就不需要建立物件,然後根據物件渲染

-vite是vue作者開發的一款意圖取代webpack的工具

-其實實現原理是利用es6的import會傳送請求去載入檔案的特性

攔截這些請求,做一些預編譯,省去webpack冗長的打包時間

2.vue3.0相容vue2.x

3.vue3.0-custom renderer api

Vue3 0學習記錄

composition api 組合api 效能提公升 viteoptions api composition api 響應式系統公升級 vue.js 3.0中使用proxy物件重寫響應式系統 proxy物件效能本身就比 defineproperty好 物件可以攔截物件的賦值 刪除等,不需要初始化遍...

vue3 0前端學習

1 響應系統公升級 vue.js 3.0 中使用proxy物件重寫響應式系統 可以監聽動態新增的屬性 可以監聽刪除的屬性 可以監聽陣列的索引和length屬性 2 編譯優化 vue.js 2.x 中,模板首先被編譯為render函式,構建過程中完成,會編譯靜態根節點和靜態子節點,當元件狀態發生變化時...

vue3 0 學習筆記

今天是2021年2月26日 學習一下vue3.0雖然已經出來這麼長時間了,但是還沒有認真的學習過,只是懂一點皮毛 接下來開始我的3.0之旅 來吧!展示!藍色海 嘿嘿嘿 第一步 安裝 先瞅瞅你的vue v 是多少 npm install g vue cli第二步 初始化 專案 這裡我們選擇 manua...