proxy基本使用
vue3用proxy實現響應式
總結vue3尚未發布,還在開發中
面試會考察候選人對新技術的關注程度(vue太熱門)
新版本發布之後,再做補充
vue3從正式發布到推廣開發,還需要一段時間
vue2.x應用範圍非常廣,有大量專案需要維護、公升級
proxy存在瀏覽器相容性問題,且不能polyfill
全部用ts重寫(響應式、vdom、模板編譯等)
效能提公升,**量減少
會調整部分api
回顧object.defineproperty
proxy實現響應式
兩者對比
回深度監聽需要一次性遞迴
無法監聽新增屬性/刪除屬性(vue.set vue.delete)
無法原生監聽陣列,需要特殊處理
基本使用
reflect
實現響應式
return result // 返回結果},
set(target, key, val, receiver)
const result = reflect.
set(target, key, val, receiver)
console.
log(
'set'
, key, val)
// console.log('result', result) // true
return result // 是否設定成功},
和proxy能力一一對應
規範化、標準化、函式式
替代掉object上的工具函式
深度監聽,效能更好
可監聽新增/刪除屬性
可監聽陣列變化
// 建立響應式
function
reactive
(target =
)// **配置
const proxyconf =
const result = reflect.
get(target, key, receiver)
// 深度監聽
// 效能如何提公升的?
return
reactive
(result)},
set(target, key, val, receiver)
const ownkeys = reflect.
ownkeys
(target)
if(ownkeys.
includes
(key)
)else
const result = reflect.
set(target, key, val, receiver)
console.
log(
'set'
, key, val)
// console.log('result', result) // true
return result // 是否設定成功},
deleteproperty
(target, key)
}// 生成**物件
const observed =
newproxy
(target, proxyconf)
return observed
}// 測試資料
const data =}}
}}}const proxydata =
reactive
(data)
效能如何提公升的?
只有get時遞迴,而且不是一次性遞迴,獲取proxydata.info時只會到city和a這一層,不會到b、c、d、e這一層
proxy能規避object.defineproperty的問題
proxy無法相容所有瀏覽器,無法polyfill
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...