(六)Vue3 0預學習

2021-10-09 07:15:59 字數 2537 閱讀 6426

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...