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

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

二、數據代理：

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 的值也會相應的更改

三、Vue 中的數據代理

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。