前端框架及項目面試 聚焦VUE，React和webpack（四）

Vue3

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

Vue3升級內容

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

Vue2.x馬上就要過時了嗎

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

接下來

• 社區熱門知識點：Proxy重寫響應式
• 其他面試題，待發布之後在補充

Proxy實現響應式

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

Object.defineProperty的缺點

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

Proxy實現響應式

• 基本使用
• Reflect
• 實現響應式

// 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)
        return result
    },
    deleteProperty(target,key){
        const result=Reflect.deleteProperty(target,key);
        console.log('delete property',key)
        console.log('result',result);
        return result;
    }
})

Reflect作用

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

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)
            return result
        },
        deleteProperty(target,key){
            const result=Reflect.deleteProperty(target,key);
            console.log('delete property',key)
            console.log('result',result);
            return result;
        }
    }
    //生成代理對象
    const observed=new Proxy(target,proxyConf)
    return observed;
}

const data={
    name:'zhangsan',
    age:20,
    info:{
        city:"beijing"
    }
}

const  proxyData=reactive(data)

Paoxy實現響應式

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

總結

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