数据劫持和数据代理

数据劫持 defineProperty

1. 属性介绍
   1. enumerable: true
      1. 用来指定属性 是否可以被枚举
      2. 枚举 通过遍历能够拿到数据
   2. writable: true
      • 用来决定属性值是否可以被修改
   3. configurable:true,
      • 用来决定属性值是否可以被删除
2. 写法：

      Object.defineProperty(obj, 'hobby', {
         value: '打篮球',
         // enumerable: true,
         // writable: true,
         // configurable:true,
         get() {
            console.log('你正在尝试获取数据')
            return hob
         },
         set(value) {
            console.log('你正在尝试修改数据', value)
            hob = value
         }
      })

3. 取对象的键

   Object.keys("取键名的对象“)

proxy 数据代理

1. vue3 原理 新的语法 proxy

2. 通过代理把数据拿到

3. get 方法 需要两个参数

   1. target: 目标
   2. prop: 目标中的属性

4. set 方法接收三个参数

   1. target:目标对象
   2. prop: 目标对象中的属性
   3. value: 修改的数据

5. 写法：

      var data = {
         username: 'zs',
         age: '20'
      }
      var vm = new Proxy(data, {
         get(target, prop) {
            console.log('target:', target)
            console.log('prop:', prop)
   
            return target[prop]
         },
         set(target, prop, value) {
            console.log('target:', target)
            console.log('prop:', prop)
            console.log('value:', value)
            target[prop] = value
         }
      })
      console.log(vm)

6. 练习

   1. console.log(obj.num, obj.num, obj.num) // 1, 2, 3

   2. 思路：

      1. 每次获取的值是不一样的
      2. 在获取本次数据的时候需要把下一次的数据修改一下

   3. 写法：

         var object = {
            num: 1
         }
         var obj = new Proxy(object, {
            get(target, prop) {
               return target[prop]++
            }
         })
         console.log(obj.num, obj.num, obj.num) // 1,2,3