1.Object.defineProperty方法
作用:number和person是俩个东西,但是通过Object.defineProperty方法,使这俩个东西产生了关联
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
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
}
})
</script>
</body>
</html>
2.最简单的数据代理
通过object2能够访问(修改,读取)object1的x
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
let object1 = {x: 100}
let object2 = {y: 200}
Object.defineProperty(object2, 'x', {
get() {
return object1.x
},
set(value) {
object1.x = value
}
})
</script>
</body>
</html>
3.Vue中的数据代理(脑瓜子嗡嗡的,先有个大概理解)
1.Vue中的数据代理:
通过vm对象来代理data对象中属性的操作(读/写)
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过Object.defineProperty()把data对象中所有的属性添加到vm,为每一个添加到vm上的属性都指定一个getter,setter内部去操作(读/写)data中对应的属性