前言：
對(duì)象中有g(shù)et和set方法停做，在讀取和設(shè)定值的時(shí)候觸發(fā)晤愧。vue中的數(shù)據(jù)綁定就是通過這個(gè)來實(shí)現(xiàn)的蛉腌。
1. 直接在對(duì)象內(nèi)使用
- get用法
var user = {
info: {
name: "張三"
},
get name(){
return this.info.name;
}
}
console.log(user.info.name) // '張三'
console.log(user.name) // '張三'
作用：
(1). 在對(duì)象內(nèi)屬性嵌套層級(jí)過多時(shí)官份，可以直接在對(duì)象下讀取到對(duì)應(yīng)屬性，簡化調(diào)用烙丛；
(2). 在get時(shí)可以任意設(shè)置屬性名舅巷，可以不暴露組件內(nèi)部屬性名。
- set用法
var user = {
info: {
name: "張三"
},
set name(val){
console.log('我改名了');
this.info.name = val;
}
}
console.log(user.name) // '張三'
user.name = '李四'; // '我改名了'
console.log(user.name) // '李四'
作用：
(1). 在對(duì)象內(nèi)屬性嵌套層級(jí)過多時(shí)河咽，可以直接在對(duì)象下設(shè)置到對(duì)應(yīng)屬性悄谐，簡化層級(jí)；
(2). set方法內(nèi)的邏輯在賦值時(shí)會(huì)自動(dòng)執(zhí)行库北，可以監(jiān)聽屬性值的改變
2. 使用Object.defineProperty()
方法會(huì)直接在一個(gè)對(duì)象上定義一個(gè)新屬性，或者修改一個(gè)對(duì)象的現(xiàn)有屬性们陆，并返回此對(duì)象寒瓦。
Object.defineproperty( object，‘ propName ’ 坪仇，descriptor)杂腰；
參數(shù)：
object ：要定義或修改屬性的對(duì)象；
propName ：要定義或修改的屬性的名稱椅文；
descriptor：要定義或修改的屬性描述符喂很。
var user = {
user_name: '張三'
}
Object.defineProperty(user, 'name', {
get(){
return user.user_name
},
set(val){
console.log('我改名了');
user.user_name = val
}
})
console.log(user.name) // '張三'
user.name = '王二'; // '我改名了'
console.log(user.name) // '王二'
console.log(user.user_name) // '王二'
作用：
set方法可以監(jiān)聽對(duì)應(yīng)屬性值的改變惜颇，vue的數(shù)據(jù)動(dòng)態(tài)綁定就是通過這個(gè)方法實(shí)現(xiàn)的，監(jiān)聽到vue實(shí)例中的data屬性發(fā)生改變時(shí)少辣，在set方法中觸發(fā)模版重新渲染邏輯凌摄。
3. 使用Object.defineProperties()
var user = {
name: '張三'
}
Object.defineProperties(user, {
nameGet: {
value: function() {
console.log('讀取');
return this.name;
}
},
nameSet: {
value: function(name) {
console.log('設(shè)置');
this.name = name;
}
}
})
console.log(user.nameGet) // '讀取' '張三'
user.nameSet = '王二'; // '設(shè)置'
console.log(user.nameSet) // '王二'
作用：
和方法1直接在對(duì)象中設(shè)置效果和原理相似
