Vue3.0預(yù)學(xué)習(xí)

• Vue3要來(lái)了Vue2就要過(guò)時(shí)了嗎
• • • Vue3
    • Vue2.x馬上就要過(guò)時(shí)了嗎
    • Vue3升級(jí)內(nèi)容
    • Proxy實(shí)現(xiàn)響應(yīng)式
    • Object.defineProperty的缺點(diǎn)
    • Proxy實(shí)現(xiàn)響應(yīng)式
• Proxy基本使用
• • • Reflect作用
• Vue3用Proxy實(shí)現(xiàn)響應(yīng)式
• • • Proxy實(shí)現(xiàn)響應(yīng)式
• 總結(jié)

Vue3要來(lái)了Vue2就要過(guò)時(shí)了嗎

Vue3

Vue3尚未發(fā)布，還在開(kāi)發(fā)中
面試會(huì)考察候選人對(duì)新技術(shù)的關(guān)注程度（Vue太熱門(mén)）
新版本發(fā)布之后，再做補(bǔ)充

Vue2.x馬上就要過(guò)時(shí)了嗎

Vue3從正式發(fā)布到推廣開(kāi)發(fā)，還需要一段時(shí)間
Vue2.x應(yīng)用范圍非常廣，有大量項(xiàng)目需要維護(hù)、升級(jí)
Proxy存在瀏覽器兼容性問(wèn)題，且不能polyfill

Vue3升級(jí)內(nèi)容

全部用ts重寫(xiě)（響應(yīng)式、vdom、模板編譯等）
性能提升，代碼量減少
會(huì)調(diào)整部分API

Proxy實(shí)現(xiàn)響應(yīng)式

回顧Object.defineProperty
Proxy實(shí)現(xiàn)響應(yīng)式
兩者對(duì)比

Object.defineProperty的缺點(diǎn)

回深度監(jiān)聽(tīng)需要一次性遞歸
無(wú)法監(jiān)聽(tīng)新增屬性/刪除屬性（Vue.set Vue.delete）
無(wú)法原生監(jiān)聽(tīng)數(shù)組，需要特殊處理

Proxy實(shí)現(xiàn)響應(yīng)式

基本使用
Reflect
實(shí)現(xiàn)響應(yīng)式

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) // 監(jiān)聽(tīng)}const result = Reflect.get(target, key, receiver)return result // 返回結(jié)果},set(target, key, val, receiver) {// 重復(fù)的數(shù)據(jù)，不處理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 // 是否設(shè)置成功},deleteProperty(target, key) {const result = Reflect.deleteProperty(target, key)console.log('delete property', key)// console.log('result', result) // truereturn result // 是否刪除成功} })

Reflect作用

和Proxy能力一一對(duì)應(yīng)
規(guī)范化、標(biāo)準(zhǔn)化、函數(shù)式
替代掉Object上的工具函數(shù)

Vue3用Proxy實(shí)現(xiàn)響應(yīng)式

Proxy實(shí)現(xiàn)響應(yīng)式

深度監(jiān)聽(tīng)，性能更好
可監(jiān)聽(tīng)新增/刪除屬性
可監(jiān)聽(tīng)數(shù)組變化

// 創(chuàng)建響應(yīng)式 function reactive(target = {}) {if (typeof target !== 'object' || target == null) {// 不是對(duì)象或數(shù)組，則返回return target}// 代理配置const proxyConf = {get(target, key, receiver) {// 只處理本身（非原型的）屬性const ownKeys = Reflect.ownKeys(target)if (ownKeys.includes(key)) {console.log('get', key) // 監(jiān)聽(tīng)}const result = Reflect.get(target, key, receiver)// 深度監(jiān)聽(tīng)// 性能如何提升的？return reactive(result)},set(target, key, val, receiver) {// 重復(fù)的數(shù)據(jù)，不處理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 // 是否設(shè)置成功},deleteProperty(target, key) {const result = Reflect.deleteProperty(target, key)console.log('delete property', key)// console.log('result', result) // truereturn result // 是否刪除成功}}// 生成代理對(duì)象const observed = new Proxy(target, proxyConf)return observed }// 測(cè)試數(shù)據(jù) const data = {name: 'zhangsan',age: 20,info: {city: 'beijing',a: {b: {c: {d: {e: 100}}}}} }const proxyData = reactive(data)

性能如何提升的？
只有g(shù)et時(shí)遞歸，而且不是一次性遞歸，獲取proxyData.info時(shí)只會(huì)到city和a這一層，不會(huì)到b、c、d、e這一層

總結(jié)

Proxy能規(guī)避Object.defineProperty的問(wèn)題
Proxy無(wú)法兼容所有瀏覽器，無(wú)法polyfill

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。