一、理解什么是代理對象

1.定義一個源對象

let obj1 = {
            name:'張三',
            age:20
        }

2.定義一個代理對象

 let obj2 = obj1

用代理對象修改源對象的數(shù)據(jù)

       obj2.name = '李四'
       obj2.age = 30

二、看一下Vue是如何使用代理對象

1.定義源對象myData
2.將源對象傳遞給Vue的Data選項，背后做了兩件事情
① 設(shè)置Vue實例的_data屬性，作為當(dāng)前源對象的代理對象。（響應(yīng)式的核心）
② 將_data里面代理的所有數(shù)據(jù)，再添加到當(dāng)前Vue實例身上。（為了Vue實例方便調(diào)用數(shù)據(jù)）

 let myData = {
            name:'張三',
            age:20
        }
        let vm = new Vue({
           
            data:myData
        })

通過Vue的代理對象_data 修改name和age的值 能夠修改 data的值

        vm._data.name = '王五'
        vm._data.age = 18

三、給對添加屬性的幾種方式

let obj3 = {}
        //方式一:
        obj3.name = '張三'
        //方式二：
        obj3['age'] = 20
        //方式三：通過Object對象的defineProperty方法，給指定的對象添加指定的屬性
        // 使用這種方式，給對象添加的屬性，默認(rèn)不可被枚舉，不能被刪除
        // 使用這種方式，給對象添加的屬性，對屬性的保護(hù)措施更加嚴(yán)格
        Object.defineProperty(obj3,'sex',{
            //屬性值
            value:'男',
            //允許被枚舉（默認(rèn)不允許）
            enumerable:true,
            //允許被刪除（默認(rèn)不允許）
            configurable:true
        })
        //通過delete關(guān)鍵，可以刪除對象身上的指定屬性
        delete obj3.name
        delete obj3.sex

四、Vue響應(yīng)式的原理

 <div>
        <h2>姓名：<span id="name"></span></h2>
        <h2>年齡：<span id="age"></span></h2>
  </div>

在頁面中，顯示姓名和年齡

        document.querySelector('#name').innerHTML = data.name
        document.querySelector('#age').innerHTML = data.age

定義一個代理對象（使用_data 去代理 data）

 let _data = {}

使用Object.defineProperty給代理對象添加屬性

      注:在設(shè)置對象的屬性-時，不能夠設(shè)置value的值
        Object.defineProperty(_data,'name',{
            //get方法，用于返回屬性的值（當(dāng)我們獲取name屬性獲取值時，會調(diào)用get方法）
            get(){
                return data.name   //返回 data.name的值
            },
            //set方法，用于設(shè)置屬性的值（當(dāng)我們設(shè)置name屬性設(shè)置值時，會調(diào)用set方法）
            set(val){
                data.name = val
                //當(dāng)代理對象，監(jiān)聽到數(shù)據(jù)發(fā)生變化了，就會重新渲染頁面
                document.querySelector('#name').innerHTML = data.name
            }
        })
        Object.defineProperty(_data,'age',{
            get(){
                return data.age
            },
            set(val){
                data.age = val
                //當(dāng)代理對象，監(jiān)聽到數(shù)據(jù)發(fā)生變化了，就會重新渲染頁面
                document.querySelector('#age').innerHTML = data.age
            }
        })