Object.defineProperty数据劫持

image.png

• observer用来实现对每个vue中的data中定义的属性循环用Object.defineProperty()实现数据劫持，以便利用其中的setter和getter，然后通知订阅者，订阅者会触发它的update方法，对视图进行更新。

• 我们介绍为什么要订阅者，在vue中v-model，v-name，{{}}等都可以对数据进行显示，也就是说假如一个属性都通过这三个指令了，那么每当这个属性改变的时候，相应的这个三个指令的html视图也必须改变，于是vue中就是每当有这样的可能用到双向绑定的指令，就在一个Dep中增加一个订阅者，其订阅者只是更新自己的指令对应的数据，也就是v-model='name'和{{name}}有两个对应的订阅者，各自管理自己的地方。每当属性的set方法触发，就循环更新Dep中的订阅者。

Object.defineProperty（data,key,descriptor）

vue3.0之前的版本实现数据双向绑定的主要实现方法：数据劫持（监控属性变化）

//  首先创建一个输入框和一个展示数据的视图


const oInput = document.elementById('#demo')
const oDiv = document.elementById('#show')

// 给定一个对象用于存放数据，并监听输入事件
const oData = {
  value: '初始值'
}
oInput.oninput = function() {
  oData.value = this.value
}

// 更新视图
function update() {
  oDiv.innerText = oData.value
}

// defineRective 方法真正对对象的属性进行监控，使用 Object.defineProperty 给属性设置 get 和 set 监听属性的读写，即数据劫持。同时在写入数据的时候判断新数据对比原数据是否发生改变，如果没有发生改变则不进行额外操作，避免性能浪费。
//在写入更新的数据后使用 upDate 对视图进行更新
function defineRective(data,key,value) {
  Object.defineProperty(data,key,{
    get:function () {
      return value
    },
    set:function(newValue) {
       if(newValue === value) return
       value = newValue
       update()
    }
  })
}

// Observer 方法用于监控对象中的任意属性是否发生改变。首先判断数据是否存在并且是否为对象，然后使用 Object.keys() 获取数据对象中的所有属性，用 forEach 进行遍历为属性添加defineRective 监控 
function Observer(data) {
  if(!data || typeof data != 'object') return data
  Object.keys(data).forEach(key => {
    defineRective(data,key,data[key])
  })
}

对深层次的数据进行监控，即数据在数据对象内的对象中时，需要适应递归的方式添加监控
// 创建数据
const data = {
  valueObj: {
    value: '初始值',
    name: 'Jaraiya'
  }
}
// 监听输入
oInput.oninput = function() {
  oData.valueObj.value = this.value
}
// 调用时更新视图
update() {
  oDiv.innerText = oData.valueOf.value
}
// 真正利用defineProperty 进行对象监控的函数
function defineRective(data,key,value) {
  Observer(value);      # 主要是这一步
  Object.defineProperty(data,key,{
    get:function() {
      return value
    },  
    set:function(newValue) {
       if(newValue === value) return
       value = newValue
       update()       
    }
  })
}

资料来源