前言：

對象中有g(shù)et和set方法，在讀取和設定值的時候觸發(fā)。vue中的數(shù)據(jù)綁定就是通過這個來實現(xiàn)的。

1. 直接在對象內(nèi)使用

• get用法

var user = {
    info: {
        name: "張三"
    },
    get name(){
        return this.info.name;
    }
}
    console.log(user.info.name) // '張三'
    console.log(user.name) // '張三'

作用：
(1). 在對象內(nèi)屬性嵌套層級過多時，可以直接在對象下讀取到對應屬性，簡化調(diào)用；
(2). 在get時可以任意設置屬性名，可以不暴露組件內(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). 在對象內(nèi)屬性嵌套層級過多時，可以直接在對象下設置到對應屬性，簡化層級；
(2). set方法內(nèi)的邏輯在賦值時會自動執(zhí)行，可以監(jiān)聽屬性值的改變

2. 使用Object.defineProperty()

方法會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性，并返回此對象。

Object.defineproperty( object，‘ propName ’ ，descriptor)；

參數(shù)：

• object ：要定義或修改屬性的對象；

• 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)聽對應屬性值的改變，vue的數(shù)據(jù)動態(tài)綁定就是通過這個方法實現(xiàn)的，監(jiān)聽到vue實例中的data屬性發(fā)生改變時，在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('設置');
            this.name = name;
        }
    }
 

})

console.log(user.nameGet) // '讀取'  '張三'
user.nameSet = '王二'; // '設置'

console.log(user.nameSet) // '王二'

作用：
和方法1直接在對象中設置效果和原理相似