一区二区自拍偷拍,亚洲欧美卡通在线另类

Vue3 解構(gòu)賦值失去響應(yīng)式引發(fā)的思考！

vue3發(fā)布以來(lái)經(jīng)歷兩年風(fēng)頭正盛，現(xiàn)在大有和react 平分天下的勢(shì)頭，我們知道他是基于proxy 實(shí)現(xiàn)響應(yīng)式的能力，解決了vue2所遺留下來(lái)的一些問(wèn)題，同時(shí)也正由于proxy的特性，也提高了運(yùn)行時(shí)的性能

凡事有利有弊， proxy雖然無(wú)敵，但是他也有本身的局限，從而產(chǎn)生一些我認(rèn)為的弊端（其實(shí)就是不符合js語(yǔ)言的自然書寫方式，有的人覺(jué)得就是個(gè)特殊寫法，他不屬于弊端）

1、原始值的響應(yīng)式系統(tǒng)的實(shí)現(xiàn) 導(dǎo)致必須將他包裝為一個(gè)對(duì)象，通過(guò) .value 的方式訪問(wèn)
2、 ES6 解構(gòu)，不能隨意使用。會(huì)破壞他的響應(yīng)式特性
好奇心驅(qū)使，研究琢磨了一下，為什么他會(huì)造成這兩個(gè)弊端

原始值的響應(yīng)式系統(tǒng)的實(shí)現(xiàn)
在理解原始值的響應(yīng)式系統(tǒng)的實(shí)現(xiàn)，我們先來(lái)溫習(xí)一下proxy 的能力！

const obj = {
name: 'win'
}

const handler = {
get: function(target, key){
    console.log('get--', key)
    return Reflect.get(...arguments)
},
set: function(target, key, value){
    console.log('set--', key, '=', value)
    return Reflect.set(...arguments)
}
}

const data = new Proxy(obj, handler)
data.name = 'ten'
console.log(data.name,'data.name22')

上述代碼中，我們發(fā)現(xiàn)，proxy 的使用本身就是對(duì)于對(duì)象的攔截，通過(guò)new Proxy 的返回值，攔截了obj 對(duì)象

如此一來(lái)，當(dāng)你訪問(wèn)對(duì)象中的值的時(shí)候，他會(huì)觸發(fā) get 方法，當(dāng)你修改對(duì)象中的值的時(shí)候他會(huì)觸發(fā) set方法

但是到了原始值的時(shí)候，他沒(méi)有對(duì)象啊，咋辦呢，new proxy 排不上用場(chǎng)了。

無(wú)奈之下，我們只能包裝一下了，所以就有了使用.value訪問(wèn)了

我們來(lái)看看具體實(shí)現(xiàn)

import { reactive } from "./reactive";
import { trackEffects, triggerEffects } from './effect'

export const isObject = (value) => {
    return typeof value === 'object' && value !== null
}

// 將對(duì)象轉(zhuǎn)化為響應(yīng)式的
function toReactive(value) {
    return isObject(value) ? reactive(value) : value
}

class RefImpl {
    public _value;
    public dep = new Set; // 依賴收集
    public __v_isRef = true; // 是ref的標(biāo)識(shí)
    // rawValue 傳遞進(jìn)來(lái)的值
    constructor(public rawValue, public _shallow) {
        // 1、判斷如果是對(duì)象使用reactive將對(duì)象轉(zhuǎn)為響應(yīng)式的
        // 淺ref不需要再次代理
        this._value = _shallow ? rawValue : toReactive(rawValue);
    }
    get value() {
        // 取值的時(shí)候依賴收集
        trackEffects(this.dep)
        return this._value;
    }
    set value(newVal) {
        if (newVal !== this.rawValue) {
            // 2、set的值不等于初始值判斷新值是否是對(duì)象進(jìn)行賦值
            this._value = this._shallow ? newVal : toReactive(newVal);
            // 賦值完將初始值變?yōu)楸敬蔚?br>            this.rawValue = newVal
            triggerEffects(this.dep)
        }
    }
}

上述代碼，就是對(duì)于原始值，的包裝，他被包裝為一個(gè)對(duì)象，通過(guò)get value 和set value 方法來(lái)進(jìn)行原始值的訪問(wèn)，從而導(dǎo)致必須有.value 的操作，這其實(shí)也是個(gè)無(wú)奈的選擇

相當(dāng)于兩瓶毒藥，你得選一瓶魚與熊掌不可兼得

為什么ES6 解構(gòu)，不能隨意使用會(huì)破壞他的響應(yīng)式特性
第一個(gè)問(wèn)題終于整明白了，那么我們來(lái)看看最重要的第二個(gè)問(wèn)題，為什么結(jié)構(gòu)賦值，會(huì)破壞響應(yīng)式特性

proxy背景
在開始之前，我們先來(lái)討論一下為什么要更改響應(yīng)式方案

vue2 基于Object.defineProperty ，但是他有很多缺陷，比如無(wú)法監(jiān)聽數(shù)組基于下標(biāo)的修改，不支持 Map、Set、WeakMap 和 WeakSet等缺陷，

其實(shí)這些也也不耽誤我們開發(fā)， vue2到現(xiàn)在還是主流，

我的理解就是與時(shí)俱進(jìn)，新一代的版本，一定要緊跟語(yǔ)言的特性，一定要符合新時(shí)代的書寫風(fēng)格，雖然proxy相對(duì)于Object.defineProperty 有很多進(jìn)步，但是也不是一點(diǎn)缺點(diǎn)都沒(méi)有，你比如說(shuō) 不兼容IE

天底下的事情，哪有完美的呢？

尤大的魄力就在于，舍棄一點(diǎn)現(xiàn)在，博一個(gè)未來(lái)！

實(shí)現(xiàn)原理
在理解了背景之后，我們?cè)賮?lái)假模假式的溫習(xí)一下proxy 原理，雖然這個(gè)都被講爛了。

但是，寫水文，講究什么：倆字-連貫

        const obj = {
            count: 1
        };
        const proxy = new Proxy(obj, {
            get(target, key, receiver) {
                console.log("這里是get");
                return Reflect.get(target, key, receiver);
            },
            set(target, key, value, receiver) {
                console.log("這里是set");
                return Reflect.set(target, key, value, receiver);
            }
        });

        console.log(proxy)
        console.log(proxy.count)

以上代碼就是Proxy的具體使用方式，通過(guò)和Reflect 的配合，就能實(shí)現(xiàn)對(duì)于對(duì)象的攔截

如此依賴，就能實(shí)現(xiàn)響應(yīng)式了，大家可以發(fā)現(xiàn)，這個(gè)obj的整個(gè)對(duì)象就被攔截了，但是你發(fā)現(xiàn)對(duì)象在嵌套深一層

比如：

    const obj = {
            count: 1,
            b: {
                c: 2
            }
        };


     console.log(proxy.b)
     console.log(proxy.b.c)

他就無(wú)法攔截了，我們必須要來(lái)個(gè)包裝

歡迎關(guān)注微信公眾號(hào) ：前端Q

在线午夜精品自拍小视频_无码av无码专区线_亚洲无码精品人妻_人人澡欧美一区

前端