一、理解什么是代理對象
1.定義一個源對象
let obj1 = {
name:'張三',
age:20
}
2.定義一個代理對象
let obj2 = obj1
用代理對象修改源對象的數據
obj2.name = '李四'
obj2.age = 30
二舰攒、看一下Vue是如何使用代理對象
1.定義源對象myData
2.將源對象傳遞給Vue的Data選項败富，背后做了兩件事情
① 設置Vue實例的_data屬性，作為當前源對象的代理對象摩窃。（響應式的核心）
② 將_data里面代理的所有數據兽叮，再添加到當前Vue實例身上。（為了Vue實例方便調用數據）
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方法充择，給指定的對象添加指定的屬性
// 使用這種方式，給對象添加的屬性匪蟀，默認不可被枚舉，不能被刪除
// 使用這種方式宰僧，給對象添加的屬性材彪，對屬性的保護措施更加嚴格
Object.defineProperty(obj3,'sex',{
//屬性值
value:'男',
//允許被枚舉（默認不允許）
enumerable:true,
//允許被刪除（默認不允許）
configurable:true
})
//通過delete關鍵，可以刪除對象身上的指定屬性
delete obj3.name
delete obj3.sex
四琴儿、Vue響應式的原理
<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給代理對象添加屬性
注:在設置對象的屬性-時，不能夠設置value的值
Object.defineProperty(_data,'name',{
//get方法造成，用于返回屬性的值（當我們獲取name屬性獲取值時显熏，會調用get方法）
get(){
return data.name //返回 data.name的值
},
//set方法，用于設置屬性的值（當我們設置name屬性設置值時晒屎，會調用set方法）
set(val){
data.name = val
//當代理對象董虱，監(jiān)聽到數據發(fā)生變化了咕娄，就會重新渲染頁面
document.querySelector('#name').innerHTML = data.name
}
})
Object.defineProperty(_data,'age',{
get(){
return data.age
},
set(val){
data.age = val
//當代理對象，監(jiān)聽到數據發(fā)生變化了，就會重新渲染頁面
document.querySelector('#age').innerHTML = data.age
}
})
