data 的数据代理
生活随笔
收集整理的這篇文章主要介紹了
data 的数据代理
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、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 的数据代理的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: BOOL 值在 debug 和 rele
- 下一篇: MFC中如何从EDIT控件中获取文字