一捣作、源碼優(yōu)化
1. 更好的代碼管理方式：monorepo
Vue.js 3.0 通過monorepo方式維護(hù)魁袜，根據(jù)功能拆分成packages目錄下不同的子目錄。某些package(比如：reactivity響應(yīng)式庫）可以單獨(dú)依賴這個(gè)庫贝次，而不必依賴整個(gè)Vue.js绳军，減少了引用包的體積大小，二Vue.js2做不到匀奏。
2. 用Typescript重構(gòu)了Vue代碼
Vue.js 1.x ----> javascript
Vue.js 2.x ----> javascript + flow
Vue.js 3.x ----> typescript
二鞭衩、性能優(yōu)化
1. 源碼體積優(yōu)化
- 移除了一些冷門特性，比如filter娃善、inline-template等
- 引入tree-shaking技術(shù)论衍，減少打包體積
tree-shaking原理：依賴ES2015模塊語法靜態(tài)結(jié)構(gòu)（即import 和 export），通過編譯階段的靜態(tài)分析聚磺，找到?jīng)]有引入的模塊并打上標(biāo)記坯台。然后壓縮階段利用uglify-js、terser等壓縮工具真正地刪除這些沒用的代碼瘫寝。
如果項(xiàng)目中沒有引用Transition蜒蕾、KeepAlive等組件，那么打包就會(huì)移除焕阿，從而減少項(xiàng)目引入Vue.js體積
2. 數(shù)據(jù)劫持優(yōu)化
Vue.js 1.x 和Vue.js 2.x
Object.defineProperty(data, 'a', {
get() {
// track
},
set() {
// trigger
}
})
缺點(diǎn)：
- 不能監(jiān)測到對(duì)象的添加和刪除咪啡，通過$set、$delete實(shí)例方法實(shí)現(xiàn)
- 不能數(shù)組基于下標(biāo)的修改暮屡、對(duì)于 .length 修改的監(jiān)測
3.不支持 對(duì) Map撤摸、Set、WeakMap 和 WeakSet類型 - 潛逃層級(jí)比較深的對(duì)象褒纲，無法判斷到你到底訪問到哪個(gè)層級(jí)准夷，就需要遞歸遍歷對(duì)象，執(zhí)行Object.defineProperty把每一層對(duì)象數(shù)據(jù)都變?yōu)轫憫?yīng)式外厂，性能消耗大
Vue.js 3.x
observed = new Proxy(data, {
get(target, key) {
// 截所有對(duì)源對(duì)象屬性的訪問動(dòng)作
// track
},
set(target, key, value) { // 包括添加和修改
// 攔截所有對(duì)源對(duì)象屬性的設(shè)置動(dòng)作
// trigger
},
has() {
// in運(yùn)算符
},
apply() {
// 攔截函數(shù)的調(diào)用冕象、call和apply操作
},
deleteProperty() {
// 刪除屬性
},
defineProperty() {
// 攔截
},
construct() {
// 用于攔截new命令
},
getOwnPropertyDescriptor() {
// 攔截Object.getOwnPropertyDescriptor()
},
getPrototypeOf(target) {
// 攔截獲取對(duì)象原型
// Object.getPrototypeOf(p) === proto
},
isExtensible() {
// 攔截Object.isExtensible操作
},
ownKeys(target) {
// 攔截對(duì)象自身屬性的讀取操作
// 注:有三類屬性會(huì)被 ownKeys方法自動(dòng)過濾:
// ·目標(biāo)對(duì)象不存在的屬性
// ·屬性名為Symbol值
// ·不可遍歷的屬性
return Reflect.ownKeys(target).fliter(key => key[0] !== '_'); // 注:ownKeys方法返回的數(shù)組成員只能是字符串或 Symbol值.
},
preventExtensions() {
// 攔截Object.preventExtensions()
},
setPrototypeOf(){
// 攔截Object.setPrototypeOf()
}
})
優(yōu)點(diǎn)：
- 對(duì)于增加和刪除都能監(jiān)測到
- Proxy API不能監(jiān)聽深層次對(duì)象變化，那么Vue.js 3.0處理方式是在getter中去遞歸響應(yīng)式汁蝶，即只能在真正訪問到的內(nèi)部對(duì)象才會(huì)變成響應(yīng)式（惰性監(jiān)測）
三渐扮、編譯優(yōu)化
template compile to render function階段可以借助vue-loader在webpack編譯階段離線完成
那么耗時(shí)更多的patch階段優(yōu)化：通過編譯階段對(duì)靜態(tài)模版的分析论悴，編譯生成Block Tree,只把綁定數(shù)據(jù)的動(dòng)態(tài)節(jié)點(diǎn)加入嵌套區(qū)塊數(shù)據(jù)，每個(gè)區(qū)塊以數(shù)組追蹤
*vNode更新性能和動(dòng)態(tài)內(nèi)容的數(shù)據(jù)相關(guān)
四墓律、語法API優(yōu)化： Composition API
1. 優(yōu)化邏輯組織
Vue1.x和Vue2.x編寫組件本質(zhì)為：編譯一個(gè)包含描述組件選項(xiàng)的對(duì)象膀估，稱為：Options API
通常包含：props、methods耻讽、data察纯、computed、watch（都是在initState函數(shù)中被初始化)
Composition API：將某個(gè)邏輯關(guān)注點(diǎn)相關(guān)的代碼全部放在一個(gè)函數(shù)里针肥，這樣修改一個(gè)功能時(shí)饼记，就不需要在文件中跳來跳去
2. 優(yōu)化邏輯復(fù)用
Vue.2.x 中用mixins去復(fù)用邏輯
后續(xù)補(bǔ)充======>
