06_数据代理

总结：

1.Vue中的数据代理

通过vm对象来代理data对象中属性的操作（读/写）

2.Vue中数据代理的好处：更加方便的操作data中的数据

3.基本原理：

通过Object.defineProperty()把data对象中的所有属性添加到vm上

为每一个添加到vm中的属性，都指定一个getter/setter

在getter/setter内部去操作（读/写）data中对应的属性

1.回顾Object.defineProperty方法

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>回顾Object.defineProperty方法</title>
 8 </head>
 9 <body>
10     <script type='text/javascript'>
11        let number = 18
12     //person对象
13        let person = {
14            name:'李四',
15            sex:'男',
16           // age:18   在这里写可以随意被枚举，修改和删除
17         }
18      Object.defineProperty(person,'age',{  //通过这种方式age属性不可以枚举（遍历）
19        // value:18,
20         //这里都设置为true表示都可以被修改、删除
21         /* enumerable:true,  //控制属性是否可以枚举，，默认值为False
22         writable:true,  //控制属性是否可以被修改，默认值为False
23         configurable:true //控制属性是否可以被删除，默认值为False */
24 
25         get(){   //当有人读取person的age属性时，get(getter)函数就会被调用，且返回值就是age的值
26             console.log('有人读取了age属性')
27             return number
28         },
29         set(value){   //当有人读取person的age属性时，set(setter)函数就会被调用，且会收到修改的具体值
30             console.log('有人修改了age属性，且值是',value)
31             number = value
32         }
33     })
34 
35     //console.log(Object.keys(person))  //通过这种方式只能拿到两个属性
36    /*  for(let key in person){
37         console.log('@',person[key])
38     } */
39     console.log(person)   
40     </script>
41 </body>
42 </html>

2.何为数据代理？

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>何为数据代理</title>
 8 </head>
 9 <body>
10     <!-- 数据代理：通过一个对象代理对另一个对象中的属性的操作（读/写 ） -->
11     <script type="text/javascript">
12     let obj = {x:100}
13     let obj2 = {y:200}
14     //通过obj2访问obj中x的值
15     Object.defineProperty(obj2,'x',{
16         get(){
17             return obj.x
18         },
19         set(value){
20             obj.x = value
21         }
22     })
23     </script>   
24 </body>
25 </html>

3.Vue中的数据代理

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>Vue中数据代理</title>
 8     <!-- 引入Vue -->
 9     <script type="text/javascript" src="../js/vue.js"></script>    
10 </head>
11 <body>
12     <!-- 准备好一个容器 -->
13     <div id = "root">
14         <h2>学校名称:{{name}}</h2>
15         <h2>学校地址:{{address}}</h2>
16     </div>       
17 </body>
18 <script type="text/javascript">
19     Vue.config.productionTip = false  // //阻止vue在启动时生成生产提示
20     const vm = new Vue({
21         el:"#root",
22         data:{
23             name:'尚硅谷',
24             address:'北京'
25         }
26     })
27 </script>
28 </html>

posted on 2021-10-26 19:51 我不想一直当菜鸟阅读(71) 评论(0) 收藏举报