2025/1/21 学习Vue的第四天
睡觉。
---------------------------------------------------------------------------------------------------------------------------------
11.Object.defineProperty
1.在我们之前学习JS的时候，普通得定义一个对象与属性。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>回顾object.defineProperty方法</title>
</head>
<body>
<script>
let Person = {
name:'张三',
sex:'男',
age:18
}
console.log(Person)
</script>
</body>
</html>我们会发现能够正常输出
2.如果我们想在此写法的对象外面添加属性，应该如何书写？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>回顾object.defineProperty方法</title>
</head>
<body>
<script>
let Person = {
name:'张三',
sex:'男',
age:18
}
Object.defineProperty(Person,'address',{
value:'黄冈'
})
console.log(Object.keys(Person))
</script>
</body>
</html>打开控制台我们会发现：额外添加的address属性，不能参与遍历
3.得到对象一系列属性的方法是：
console.log(Object.keys(Person))
并不能得到address属性
4.让我们试着书写遍历的代码看看能不能遍历得到address。使用for in
for(var key in Person){
console.log(Person[key])
}
我们发现并没有得到address的值，这说明我们不能控制额外添加的属性值
那么如何控制额外添加的属性呢？
5.如何控制，使得额外添加属性可修改可遍历可删除
Object.defineProperty(Person,'address',{
value:'黄冈',
enumerable:true,//控制属性是否可以枚举
writable:true,//控制属性是否可以被修改
configurable:true//控制属性是否可以被删除
})6.将额外的属性定义在Object外面，再由Object.defineProperty修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>回顾object.defineProperty方法</title>
</head>
<body>
<script>
var add ='武汉'
let Person = {
name:'李四',
sex:'男',
age:18
}
Object.defineProperty(Person,'address',{
// value:'黄冈',
// enumerable:true,//控制属性是否可以枚举
// writable:true,//控制属性是否可以被修改
// configurable:true//控制属性是否可以被删除
get(){
console.log('有人读取了')
return add
},
set(){
console.log('有人修改了')
return add
}
})
// for(var key in Person){
// console.log(Person[key])
// }
console.log(Person)
// console.log(Object.keys(Person))
</script>
</body>
</html>
12.理解数据代理
通过一个对象代理，对另一个对象中属性的操作
1.让我们使用一个简单的例子来实现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>理解数据代理</title>
</head>
<body>
<script>
let A={
name1:'苏高阳'
}
let B={
name2:'赵丽颖'
}
Object.defineProperty(A,'name2',{
get(){
console.log('读取B')
return B.name2
},
set(value){
console.log('修改A')
A.name1=value
}
})
</script>
</body>
</html>
2.我们发现通过Object.defineproperty传入一个对象，传入其他对象的属性，可以改变两个对象的属性。
加深了我们对于数据代理的理解。
13.Vue中的数据代理
1.Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读写）
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过Object.defineProperty（）把 data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter
在getter/setter内部去操作（读/写）data中对应的属性
原文地址：https://blog.csdn.net/m0_75153577/article/details/145278389
免责声明：本站文章内容转载自网络资源，如侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！