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中对应的属性