学习视频:https://www.bilibili.com/video/BV1Zy4y1K7SH
数据代理:通过一个对象代理对另一个对象中属性的操作(读/写)
Object.defineProperty:给一个对象添加属性
如果数据发生变化通过getter和sertter进行依赖收集通知Watcher进行视图更新
通过getter收集依赖,修改时通知watcher更新视图,对数据的操作(读/写)进行拦截
Object.defineProperty()三个参数
- 参数1:给哪个对象添加属性
- 参数2:添加的属性名
- 参数3:配置项
基础语法
这样写完了,person就有了age属性
通过这种方式给对象添加的属性不可枚举
如果想让它可枚举,可以添加enumerable:true
配置项
需求:person对象的age属性是从number中读来的,如果number的数值改了,person对象中的age要跟着变
let number = 18
let person = {
name: '张三',
sex: '男',
}
Object.defineProperty(person, 'age', {
// value:18,
// enumerable:true, // 控制属性是否可以枚举,默认值是false
// writable:true, // 控制属性是否可以被修改,默认值是false
// configurable:true // 控制属性是否可以被删除,默认值是false
// 当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
get() {
console.log('有人读取age属性了')
return number
},
// 当有人修改person的age属性时,set函数(setter)就会被调用,且会收到修改的具体值
set(value) {
console.log('有人修改了age属性,且值是', value)
number = value
}
})
// console.log(Object.keys(person))
console.log(person)
set想要修改age的值要通过number修改,number = value
,如果不加上,直接用person.age赋值去修改age的值是无法成功的。
数据代理的定义:通过一个对象代理对另一个对象中属性的操作
最简单的数据代理
e.g.通过obj2可以操作(读/改)obj1身上的x
let obj = { x: 100 }
let obj2 = { y: 200 }
Object.defineProperty(obj2, 'x', {
get() {
return obj.x
},
set(value) {
obj.x = value
}
})
obj2身上不仅有自身的y,还有x和操作x的get和set方法
Vue中如何应用数据代理
验证setter(通过vm修改name看看能不能影响data.name)
验证vm._data=data
<div id="root">
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip = false;
let data = {
name: '尚硅谷123',
address: '北京'
}
const vm = new Vue({
el: '#root',
data:data
})
</script>
Vue将data中的数据拷贝了一份到_data属性中,又将_data里面的属性提到Vue实例中(如name),通过defineProperty 实现数据代理
,这样通过geter/setter操作name,进而操作_data中的name。而_data 又对data进行数据劫持
,实现响应式
总结
- Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写) - Vue中数据代理的好处:
更加方便的操作data中的数据 - 基本原理:
通过object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性,都指定一个getter/setter。
在getter/setter内部去操作(读/写)data中对应的属性。