浅谈Vue数据劫持

今天我们一起来看看Vue2中数据劫持的方法

ps:本章脱离vue2单讲数据劫持

• 什么是数据劫持

  • 对属性的读取和修改拦截

    简单来说就是数据的任何变化都要能监测到，这样才能根据数据变化做对应操作

• 为什么要用数据劫持

  • Vue2中data里的数据都是响应式数据，数据一经更改，页面上的数据就会进行局部更新

    如果不进行数据劫持，不知道数据状态就无从更新数据

• Vue2中数据劫持使用了Object.defineProperty方法

  • 使用Object.defineProperty可以给对象定义一个新属性或者修改属性并返回

• Object.defineProperty新增属性

  • Object.defineProperty(obj,prop,descriptor)
  • 这个方法接收三个参数，obj是要操作的对象，prop是要操作的属性，descriptor是描述符
  • 对象属性新增

  let obj = {
          "name":"vike",
          "age":5,
          "sex":"男"
      }
  //给obj新增一个hobby属性，值为value,返回新增后的对象
  let result = Object.defineProperty(obj,'hobby',{
          value:['code','juejin']
      })
  console.log(result，'新增后')
  

• 对象属性修改

      //对象属性修改
      let obj = {
          "name":"vike",
          "age":5,
          "sex":"男"
      }
      //第二个参数为要修改的属性，value为修改属性的值
      let result = Object.defineProperty(obj,'name',{
          value:'123'
      })
      console.log(result)
  

  

• Object.defineProperty实现数据劫持

  • 给源数据设置一个代理，源对象每一个属性要写一次Object.defineProperty，

    这边拿name举例

  • Object.defineProperty数据劫持的实现主要依靠属性的两个函数

    • get() 属性的getter函数 访问该属性会自动调用
    • set(newValue) 属性的setter函数 修改该属性会自动调用，该方法接收一个参数，传入赋值时的this
    • 没有get和set的时候默认为undefined

      // 实现数据劫持
      // 源数据
      let obj = {
          "name":"vike",
          "age":5,
          "sex":"男"
      }
      //设置一个代理
      let p = {}
      Object.defineProperty(p,'name',{
          // 读取时触发
          get(){
              console.log('有人读取属性')
              return obj.name
          },
          // 修改时触发
          set(newValue){
              console.log('有人修改属性')//此处触发vue2页面更新逻辑
              obj.name = newValue//将新值重新赋给源数据
          }
      })
      console.log(obj,'源数据')
  

  

• Object.defineProperty知识拓展

  • descriptor描述符包含两大类 六种

    • 数据描述符

      • configurable

        当且仅当该属性的 configurable 键值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。 默认为 false。

      • enumerable

        当且仅当该属性的 enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。 默认为 false

      • value

        该属性对应的值 默认为 [undefined]

      • writable

        当且仅当该属性的 writable 键值为 true 时，属性的值，也就是上面的 value，才能被[赋值运算符]改变。 默认为 false

    • 存取描述符

      • get 取值时调用
      • set 修改值时调用

    • 浏览器兼容性

      

    • 本节知识点分享到这里，下篇我们继续探讨Vue3数据劫持的新方法