Vue官網(wǎng)原文有解釋：當(dāng)你把一個普通的JavaScript對象傳給Vue實例的data選項，Vue將遍歷此對象所以的屬性，并使用Object.defineProperty把這些屬性全部轉(zhuǎn)為getter/setter。
- 數(shù)據(jù)代理 Object.defineProperty() 定義屬性、改變屬性的描述
- 語法：Object.defineProperty(obj,prop,descriptor)
- 參數(shù)： obj要在其上定義屬性的對象，prop要定義或修改的屬性的名稱，descriptor將定義或修改的屬性描述符
數(shù)據(jù)描述 :
- configurable 是否可以刪除目標(biāo)屬性。默認為false
- enumerable 此屬性時候可以被枚舉。默認為false
- value 該屬性對應(yīng)的值，默認為undefined
- writable 屬性的值是否可以被重寫，默認為false
//在o身上定義一個b，b的值為123
var o = {
a : 1
}
Object.defineProperty(o,'b',{
value: 123,
})
console.log(o); // { a:1, b:123 }
//在o身上定義一個b，b的值為123
var o = {
a : 1
}
Object.defineProperty(o,'b',{
value: 123,
writable: false,
enumerable: false,
configurable: true
})
//對原有的屬性a也可以進行限制
Object.defineProperty(o,'a',{
value: 123,
writable: false,
enumerable: false,
configurable: true
})
o.b = 90 //writable 默認值為false 所以b的值無法被修改
for(var attr in o) {
console.log(attr); //b無法被枚舉，因為enumerable默認值是false
}
console.log(o); // { a:1, b:123 }
存取器描述 : 可以知道什么時候數(shù)據(jù)發(fā)生了改變
- getter是一種獲得屬性值的方法
- setter 是一種設(shè)置屬性值的方法
- 可以寫configurable、enumerable
- 不能寫value、 writable
var o = {
a : 1
}
Object.defineProperty(o,'b'.{
get(){
console.log('取值');
return 1
},
set(newValue){
console.log('設(shè)置值',newValue);
}
})
o.b = 10000;// 這里會出發(fā) set 打印出 '設(shè)置值' 10000
舉例子：這種寫法每次改變數(shù)據(jù)的時候都需要去渲染一遍
<body>
<button id="change_name">改變姓名</button>
<button id="change_age">改變年齡</button>
<p id="name">姓名：XXX</p>
<p id="age">年齡:xxx</p>
<script>
var data = {
name: 'leo',
age: 18
}
//原生做法
var namep = document.querySelector('#name');
var age = document.querySelector('#age');
var change_name = document.querySelector('#change_name');
var change_age = document.querySelector('#change_age');
namep.innerText = '姓名：'+ data.name;
age.innerText = '年齡：'+ data.age;
change_name.onclick = function(){
data.name = 'jon';
namep.innerText = '姓名：'+data.name;
}
change_age.onclick = function(){
data.age = '60';
age.innerText = '年齡：'+data.age;
}
</script>
</body>
舉例子：Vue中的做法，只需要數(shù)據(jù)怎么變就可以了
function observer(data,cb) {
Object.keys(data).forEach(item => {
reactive(data,item,data[item],cb)
})
}
function reactive(obj,prop,value,cb){
Object.defineProperty(obj,prop,{
get(){
return value;
},
set(newValue){
value = newValue
cb()
}
})
}
var data = {
name: 'leo',
age: 18
}
observer(data,function(){
render()
})
console.log(data)
//原生做法
var namep = document.querySelector('#name');
var age = document.querySelector('#age');
var change_name = document.querySelector('#change_name');
var change_age = document.querySelector('#change_age');
function render(){
namep.innerText = '姓名：'+ data.name;
age.innerText = '年齡：'+ data.age;
}
render();
change_name.onclick = function(){
data.name = 'jon';
}
change_age.onclick = function(){
data.age = '60';
}
