Vue3.0預學習

• Vue3要來了Vue2就要過時了嗎
• • • Vue3
    • Vue2.x馬上就要過時了嗎
    • Vue3升級內容
    • Proxy實現響應式
    • Object.defineProperty的缺點
    • Proxy實現響應式
• Proxy基本使用
• • • Reflect作用
• Vue3用Proxy實現響應式
• • • Proxy實現響應式
• 總結

Vue3要來了Vue2就要過時了嗎

Vue3

Vue3尚未發布，還在開發中
面試會考察候選人對新技術的關注程度（Vue太熱門）
新版本發布之后，再做補充

Vue2.x馬上就要過時了嗎

Vue3從正式發布到推廣開發，還需要一段時間
Vue2.x應用范圍非常廣，有大量項目需要維護、升級
Proxy存在瀏覽器兼容性問題，且不能polyfill

Vue3升級內容

全部用ts重寫（響應式、vdom、模板編譯等）
性能提升，代碼量減少
會調整部分API

Proxy實現響應式

回顧Object.defineProperty
Proxy實現響應式
兩者對比

Object.defineProperty的缺點

回深度監聽需要一次性遞歸
無法監聽新增屬性/刪除屬性（Vue.set Vue.delete）
無法原生監聽數組，需要特殊處理

Proxy實現響應式

基本使用
Reflect
實現響應式

Proxy基本使用

// const data = { // name: 'zhangsan', // age: 20, // } const data = ['a', 'b', 'c']const proxyData = new Proxy(data, {get(target, key, receiver) {// 只處理本身（非原型的）屬性const ownKeys = Reflect.ownKeys(target)if (ownKeys.includes(key)) {console.log('get', key) // 監聽}const result = Reflect.get(target, key, receiver)return result // 返回結果},set(target, key, val, receiver) {// 重復的數據，不處理if (val === target[key]) {return true}const result = Reflect.set(target, key, val, receiver)console.log('set', key, val)// console.log('result', result) // truereturn result // 是否設置成功},deleteProperty(target, key) {const result = Reflect.deleteProperty(target, key)console.log('delete property', key)// console.log('result', result) // truereturn result // 是否刪除成功} })

Reflect作用

和Proxy能力一一對應
規范化、標準化、函數式
替代掉Object上的工具函數

Vue3用Proxy實現響應式

Proxy實現響應式

深度監聽，性能更好
可監聽新增/刪除屬性
可監聽數組變化

// 創建響應式 function reactive(target = {}) {if (typeof target !== 'object' || target == null) {// 不是對象或數組，則返回return target}// 代理配置const proxyConf = {get(target, key, receiver) {// 只處理本身（非原型的）屬性const ownKeys = Reflect.ownKeys(target)if (ownKeys.includes(key)) {console.log('get', key) // 監聽}const result = Reflect.get(target, key, receiver)// 深度監聽// 性能如何提升的？return reactive(result)},set(target, key, val, receiver) {// 重復的數據，不處理if (val === target[key]) {return true}const ownKeys = Reflect.ownKeys(target)if (ownKeys.includes(key)) {console.log('已有的 key', key)} else {console.log('新增的 key', key)}const result = Reflect.set(target, key, val, receiver)console.log('set', key, val)// console.log('result', result) // truereturn result // 是否設置成功},deleteProperty(target, key) {const result = Reflect.deleteProperty(target, key)console.log('delete property', key)// console.log('result', result) // truereturn result // 是否刪除成功}}// 生成代理對象const observed = new Proxy(target, proxyConf)return observed }// 測試數據 const data = {name: 'zhangsan',age: 20,info: {city: 'beijing',a: {b: {c: {d: {e: 100}}}}} }const proxyData = reactive(data)

性能如何提升的？
只有get時遞歸，而且不是一次性遞歸，獲取proxyData.info時只會到city和a這一層，不會到b、c、d、e這一層

總結

Proxy能規避Object.defineProperty的問題
Proxy無法兼容所有瀏覽器，無法polyfill

總結

以上是生活随笔為你收集整理的（六）Vue3.0预学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。