關(guān)于vue2響應(yīng)式缺陷的問(wèn)題

更新時(shí)間：2022年09月10日 10:49:03 作者：Qiemoer

這篇文章主要介紹了關(guān)于vue2響應(yīng)式缺陷的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue2響應(yīng)式缺陷

響應(yīng)式 : 數(shù)據(jù)改變 ==> 視圖跟著改變

vue2響應(yīng)式缺陷

1.對(duì)象新增的屬性沒(méi)有響應(yīng)式

對(duì)象,新增屬性b,修改b的值,值改變但視圖并未更新

解決方案 : 使用vue提供的 api $set(對(duì)象,屬性名,值) 效果如屬性c

2.數(shù)組的部分操作沒(méi)有響應(yīng)式

數(shù)組中有7種操作有響應(yīng)式

array.pop()
array.push()
array.shift()
array.unshift()
array.sort()
arry.reverse()
array.splice()

以上7中API會(huì)修改原數(shù)組(vue2的內(nèi)部重寫(xiě)了這7個(gè)API)

其他的操作都不會(huì)有響應(yīng)式

示例:

1.修改數(shù)組的第一個(gè)元素的值

// 直接通過(guò)下標(biāo)來(lái)修改，沒(méi)有響應(yīng)式
fn1() {
    this.arr[0] = 100
}

通過(guò)下標(biāo)直接賦值,沒(méi)有響應(yīng)式

2.修改數(shù)組的長(zhǎng)度為0

//修改數(shù)組的length
fn2 () {
    this.arr.length = 0
}

修改數(shù)組的length,沒(méi)有響應(yīng)式

如何修改數(shù)組的值有響應(yīng)式

fn1 () {
    // 方法1： 先刪除，再添加
    this.arr.splice(0,1,100)
},
fn2 () {
    // 方法2： $set
    this.$set(this.arr, "0", 100)
}

vue2與vue3的響應(yīng)式原理

給大家分享一下Vue2和Vue3的響應(yīng)式原理；說(shuō)到響應(yīng)式無(wú)非就是監(jiān)聽(tīng)屬性的獲取，修改及刪除...，了解邏輯之后再去實(shí)現(xiàn)底層代碼豈不是快了許多=_=

vue2響應(yīng)式

原理：利用defineReactive方法，通過(guò)defineProperty對(duì)屬性進(jìn)行劫持，數(shù)組則是通過(guò)重寫(xiě)其方法來(lái)進(jìn)行劫持，每個(gè)屬性值都擁有自己的dep屬性，用來(lái)存取所依賴的watch，當(dāng)數(shù)據(jù)發(fā)生改變時(shí)，觸發(fā)相應(yīng)的watch去更新數(shù)據(jù)

代碼實(shí)現(xiàn)：

const { arrayMethods } = require('./array')
 
class Observer {
    constructor(value) {
        Object.defineProperty(value, '__ob__', {
            value: this,
            enumerable: false,
            writable: true,
            configurable: true
        })
        if(Array.isArray(value)) {
            value.__proto__ = arrayMethods
            this.observeArray(value)
        } else {
            this.walk(value)
        }
    }
 
    walk(data) {
        let keys = Object.keys(data)
        for(let i = 0; i < keys.length; i++) {
            const key = keys[i]
            const value = data[key]
            defineReactive(data, key, value)
        }
    }
 
    observeArray(items) {
        for(let i = 0; i < items.length; i++) {
            observe(items[i])
        }
    }
}
 
function defineReactive(data, key, value) {
    const childOb = observe(value)
 
    const dep = new Dep()
 
    Object.defineProperty(data, key, {
        get() {
            console.log('獲取值')
            if (Dep.target) {
                dep.depend()
 
                if (childOb) {
                    childOb.dep.depend()
 
                    if (Array.isArray(value)) {
                        dependArray(value)
                    }
                }
            }
            return value
        },
        set(newVal) {
            if (newVal === value) return
            observe(newVal)
            value = newVal
            dep.notify()
        }
    })
}
 
function observe(value) {
    if (Object.prototype.toString.call(value) === '[object Object]' || Array.isArray(value)) {
        return new Observer(value)
    }
}
 
function dependArray(value) {
    for(let e, i = 0, l = value.length; i < l; i++) {
        e = value[i]
 
        e && e.__ob__ && e.__ob__.dep.depend()
 
        if (Array.isArray(e)) {
            dependArray(e)
        }
    }
}
 
// array.js
const arrayProto = Array.prototype
 
const arrayMethods = Object.create(arrayProto)
 
const methodsToPatch = [
    'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'reverse',
    'sort'
]
 
methodsToPatch.forEach(method => {
    arrayMethods[method] = function (...args) {
        const result = arrayProto[method].apply(this, args)
 
        const ob = this.__ob__
 
        var inserted
 
        switch (method) {
            case 'push':
            case 'unshift':
                inserted = args
                break;
            case 'splice':
                inserted = args.slice(2)
            default:
                break;
        }
 
        if (inserted) ob.observeArray(inserted)
 
        ob.dep.notify()
 
        return result
    }
})

但是呢，Vue2的響應(yīng)式還存在一些缺陷：1.對(duì)象新增屬性，刪除屬性界面不會(huì)更新 2.通過(guò)數(shù)組下標(biāo)修改數(shù)組內(nèi)容界面不會(huì)更新

原因：1.Vue 無(wú)法檢測(cè) property 的添加或移除。由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì) property 執(zhí)行 getter/setter 轉(zhuǎn)化，所以 property 必須在 data 對(duì)象上存在才能讓 Vue 將它轉(zhuǎn)換為響應(yīng)式的

2.通過(guò)數(shù)組下標(biāo)修改數(shù)組不會(huì)觸發(fā)響應(yīng)，因?yàn)橛扔晗昧酥貙?xiě)數(shù)組的方法來(lái)實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)綁定，當(dāng)vue遇到push pop shift unshift splice sort reverse 的時(shí)候數(shù)組才會(huì)改變

解決方案：1.對(duì)象：對(duì)象新增屬性無(wú)法更新視圖，通過(guò)Vue.$set(obj,key,value)，組件中通過(guò)this.$set(obj,key,value)

2.數(shù)組：通過(guò)數(shù)組下標(biāo)修改數(shù)組不會(huì)觸發(fā)視圖更新，可以通過(guò)Vue.$set(obj,key,value),也可以通過(guò)push pop shift unshift splice sort reverse方法來(lái)實(shí)現(xiàn)響應(yīng)

Vue3的響應(yīng)式彌補(bǔ)了Vue2響應(yīng)式的缺陷，并且還帶來(lái)了許多優(yōu)化，下面讓我們來(lái)了解一下Vue3響應(yīng)式的基本雛形

vue3響應(yīng)式雛形

原理：利用了Proxy和Reflect來(lái)代替Vue2的Object.defineProperty()方法來(lái)重寫(xiě)響應(yīng)式

這只是基本的代碼：

        let person = {
            name: '張三',
            age: 18
        }
        const p = new Proxy(person, {
            get(target, propName) {
                console.log(`我的${propName}值被獲取了`);
                return Reflect.get(target, propName)
            },
            set(target, propName, value) {
                console.log(`我的${propName}值被修改了`);
                Reflect.set(target, propName, value)
            },
            deleteProperty(target, propName) {
                console.log(`我的${propName}值被刪除了`);
                Reflect.deleteProperty(target, propName)
            }
        })

target指的是整個(gè)person，propName指的是person中的某個(gè)屬性，value指的是新值。

運(yùn)行結(jié)果：