浅谈vue数据劫持(2)

---

theme: healer-readable

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

前言:

• 上一篇讲解了defineProperty方法今天来讲讲proxy

• vue3中数据劫持使用了proxy主要是因为defineProperty有几项缺点

  • 新增属性，删除属性
  • 直接通过下标修改数组

• defineProperty缺点讲解

  //先回顾上期知识点       let person = {        name:'vike',        age:5   } ​    // 回顾上篇defineProperty方法    let p = {}    // name属性    Object.defineProperty(p,'name',{        get(){            console.log('读取name属性')            return person.name       },        set(newValue){            console.log('修改name属性')            person.name = newValue       }   })    // age属性    Object.defineProperty(p,'age',{        get(){            console.log('读取age属性')            return person.age       },        set(newValue){            console.log('修改age属性')            person.age = newValue       }   })

• 新增属性

  • 没有进行数据劫持 不能成为响应式数据

• 删除属性

  • 使用delete关键字删除属性，返回flase。
  • delete 删除会返回true或者flase。删完了为true，删不掉为false
  • 在Object.defineProperty配置项内多加一行configurable:true，即可删除
  • delete删除p上属性不会影响person上的属性，主要原因是无法捕获这个变化

proxy讲解

• window.Proxy为内置函数

  • 使用实例

  let person = {        name:'vike',        age:5   } ​    // proxy作用 让p映射person 第一个参数为要映射的对象 第二参数可为空对象占位    let p = new Proxy(person,{})

-   Proxy里的Handler 对属性进行增删改查操作靠这里面的配置

-   Proxy里的Target 属性

    -   取值方法 p.name p.age

-   新增 修改 删除 proxy代理实现

-   proxy捕获数据

    ```
     // 源对象
        let person = {
            name:'vike',
            age:5
        }
    ​
        // 代理对象
        let p = new Proxy(person,{
            // get 上有两个参数 target是newProxy传入的对象 propName是读取的属性
            // 读取属性触发
            get(target,propName){
                console.log(`读取了${propName}属性`)
                return target[propName]
            },
            // set上新增了newValue属性 修改和新增触发
            set(target,propName,newValue){
                console.log(`修改了${propName}属性`)
                target[propName] = newValue
            },
            // deleteProperty 删除属性触发
            deleteProperty(target,propName) {
                console.log(`删除了${propName}属性`)
                delete target[propName]
            }
        })
    ```

-   delete p.name返回false是因为deleteProperty方法没返回，只要`return delete target[propName]`

### Reflect 介绍

-   ES6新增

-   ECMA正尝试把Object上的方法移植到Reflect上

-   Reflect方法上也包含defineProperty 且有返回值 true表示成功，false表示失败

    ```
        let person = {
            name:'vike',
            age:5
        }
    ​
        let p1 = Reflect.defineProperty(person,'sex',{
            get() {
                return '男'
            }
        })
    ​
        let p2 = Reflect.defineProperty(person,'sex',{
            get() {
                return '女'
            }
        })
    ​
        console.log(p1,p2)
    ```

-   对比Object.defineProperty 会直接报错且不执行下面代码

    ```
        let person = {
            name:'vike',
            age:5
        }
    ​
        Object.defineProperty(person,'sex',{
            get() {
                return '男'
            }
        })
    ​
        Object.defineProperty(person,'sex',{
            get() {
                return '女'
            }
        })
    ```

总结

• Reflect和Object来说，框架封装更需要健壮性强的Reflect
• Proxy处理响应式数据更具优势
• Object.defineProperty那些缺点在vue框架里也提供了相应的api进行解决