1.基本理解Object.defineProperty

Object.defineProperty（）可以給對(duì)象添加新的屬性，也可以修改本身的屬性

1.1簡(jiǎn)單的理解

是利用defineproperty來實(shí)現(xiàn)具體來說是對(duì)data里的屬性都設(shè)置了getter和setter，getter收集依賴就是收集每個(gè)標(biāo)簽和每個(gè)數(shù)據(jù)屬性的對(duì)應(yīng)關(guān)系，當(dāng)data對(duì)象中屬性修改賦值的時(shí)候就會(huì)觸發(fā)對(duì)應(yīng)的setter函數(shù)攔截進(jìn)行視圖更新

1751872982884.png

2.深入理解Object.defineProperty

當(dāng)Object.defineProperty（）這個(gè)方法改變自身屬性時(shí)，比如給自身name屬性添加get(),和set()方法時(shí)，就會(huì)出現(xiàn)錯(cuò)誤，雖然表面上方法添加上了，但實(shí)質(zhì)上是一種錯(cuò)誤的表現(xiàn)形式

let data={
            name:"一元教育"
        }
        //死循環(huán)，當(dāng)你讀取data.name時(shí)，調(diào)用get(),然后一直讀取，進(jìn)入死循環(huán)，當(dāng)你改變data.name值，一直在改變，進(jìn)入新的死循環(huán)
        Object.defineProperty(data,'name',{
            get(){
                return data.name
            },
            set(val){
                data.name=val
            }
        })

3.更深層理解該方法
我們學(xué)Vue的時(shí)候，它里面原生寫數(shù)據(jù)代理就涉及到該方法，具體內(nèi)容，我一 一說開，構(gòu)造一個(gè)名為vm的Vue對(duì)象 ，數(shù)據(jù)代理表面上是指vm._data=data；將data里面的數(shù)據(jù)對(duì)象賦值給新的對(duì)象_data，但_datal里面的內(nèi)容不止如此，里面有g(shù)et(),set(),這個(gè)時(shí)候要寫一段代碼說明用該方法如何使用使得Vue對(duì)象里面檢測(cè)是否添加get()set()方法，遞歸思想，只要data數(shù)據(jù)里面存在對(duì)象，就能給對(duì)象對(duì)應(yīng)的屬性添加這兩種方法，下面的代碼只考慮一層

<script>
        let data={
            realname:"bob",
            id:"001",
            age:28
        }
        //創(chuàng)建一個(gè)監(jiān)視的實(shí)例對(duì)象，用與監(jiān)視data中屬性的變化
        const obs=new Observer(data);
        function Observer(obj){
            const keys=Object.keys(obj);
            keys.forEach((k)=>{
                //給傳過來的實(shí)例對(duì)象data里面的屬性添加getter,setter方法
                Object.defineProperty(this,k,{
                    get(){
                        return obj[k]
                    },
                    set(val){
                        console.log(`${k}被改了，我要解析模板，生成虛擬DOM,忙碌`);
                        obj[k]=val
                    }
                })
            })
        }
        console.log(obs);
        data=obs;
        console.log(data);
        let vm={};
        vm._data= data;
    </script>