一、Object.defineProperty() 控制對象的屬性值

let num = 18; let person = {name: 'mary',age: num; };Object.defineProperty(person, 'age', {writable: true, // 控制屬性是否可以修改. 默認(rèn)值是 falseenumerable: true, // 控制屬性是否可以枚舉，默認(rèn)值是 falseconfigurable: true // 控制屬性是否可以被刪除，默認(rèn)值是 false// 當(dāng)有人讀取 person.age 時(shí)，get 函數(shù)(getter)就會(huì)被調(diào)用，且返回值就是 age 的值get() {console.log('有人讀取了 age 屬性');return num;},// 當(dāng)有人修改 person.age 時(shí)，get 函數(shù)(setter)就會(huì)被調(diào)用，就會(huì)收到具體修改的值set(val) {console.log('有人修改了 age 屬性');age = val;} })

二、數(shù)據(jù)代理：

let obj1 = {x: 100}; let obj2 = {y : 200};Object.defineProperty(obj2, 'x', {get() {return obj1.x;},set(val) {obj1.x = val;} })// 修改 obj2.x 的值，obj1.x 的值也會(huì)相應(yīng)的更改

三、Vue 中的數(shù)據(jù)代理

<!--1. VueProject 中的數(shù)據(jù)代理：通過 vm 對象來代理 data 對象中的屬性的操作（讀/寫）2. VueProject 中數(shù)據(jù)代理的好處：更加方便的操作 data 中的數(shù)據(jù)3. 基本原理：通過 Object.defineProperty() 把 data 對象中所有屬性添加到 vm 上。為每一個(gè)添加到 vm 上的屬性，都指定一個(gè) getter / setter在 getter / setter 內(nèi)部去操作（讀 / 寫）data 中對應(yīng)的屬性vm._data 里面用到數(shù)據(jù)劫持，為的是監(jiān)聽數(shù)據(jù)是否發(fā)生變化，以便響應(yīng)式的更新到頁面 -->

總結(jié)

以上是生活随笔為你收集整理的data 的数据代理的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。