理解数据代理

Object.defineProperty方法

Vue.js底层的数据劫持、数据代理、计算属性都用到了该方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
       let number = 18
       let person = {
           name: '张三',
           sex: '男'
       }
       //第一个参数是给哪个对象传递参数
       //第二个参数是添加的属性名
       //第三个参数是配置项
       Object.defineProperty(person,'age',{
           // value: 18,
           // enumerable:true,  //控制属性是否可以枚举，默认false
            //writable: true,  //控制属性是否可以更改，默认为fasle
           // configurable: true,  //控制属性是否可以被删除，默认是false
           
           //当有人读取person的age属性时，get函数就会被调用，且返回值就是age的值
           get(){
               return number
           },
           //当有人修改person的age属性时，set函数（setter）就会被调用，且会收到修改的具体值
           set(value){
               number = value
           }
       })

       console.log(Object.keys(person))
       console.log(person)
   </script>

get方法

set方法

数据代理

通过一个对象代理对另一个对象中属性的操作（读/写）

1
2
3
4
5
6
7
8
9
10
11
12
<script>
      let obj = {x:12}
      let obj2 = {y:14}
      Object.defineProperty(obj2,'x',{
          get(){
              return obj.x
          },
          set(value){
              obj.x = value
          }
      })
   </script>

Vue中的数据代理

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

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

3.基本原理：

  • 通过Object.defineProperty()把data对象中所有属性添加到vm上。
  • 为每一个添加到vm上的属性，都指定一个getter/setter方法
  • 在getter/setter内部去操作（读/写）data中相应的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<body>
    <div id="app">
        学校：{{school}}
        地址：{{address}}
    </div>
  
   
</body>
<script type="text/javascript">
    let data = {
        school: 'zz',
        address: 'aa'
    }
   const vm = new Vue({
                el: '#app',
                data
            })
        </script>

学习笔记 Vue
Vue

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！