3分钟了解vue数据劫持的原理

目的: 了解Object.defineProperty如何实现数据劫持javascript

阅读时间: 3 分钟前端

大体原理是这样的：vue

1. 定义一个监听函数，对对象的每个属性进行监听
2. 经过Object.defineProperty对监听的每个属性设置get 和 set 方法。
3. 对对象实行监听
4. 对对象内嵌对象进行处理
5. 对数组对象进行处理

1. 先定义一个对象java

let obj = {
  name: 'jw'
}
复制代码

2. 定义一个监听函数数组

/** * 判断监听的是不是对象 * 若是是对象，就遍历，而且对每一个属性进行定义get 和 set */

function observer(obj) {
  if(typeof obj === 'object') {
    for (let key in obj) {
    // defineReactive 方法设置get和set，见第三步
      defineReactive(obj, key, obj[key]);
    }
  }
}
复制代码

3.定义一个函数，处理每一个属性函数

function defineReactive(obj, key, value) {
  Object.defineProperty(obj, key, {
    get() {
      return value;
    },
    set(val) {
      console.log('数据更新了')
      value = val;
    }
  })
}
复制代码

ok. 到这里第一版已经实现了。尝试一下吧ui

observer(obj);
obj.name = 'haha'

控制台输出: 
//数据更新了
复制代码

以上已经实现设置obj的属性的时候，被监听到，而且能够去执行一些代码了。可是，若是对象里面嵌入了对象呢？好比: this

let obj = {
  name: 'jw',
  age: {
    old: 60
  }
}
复制代码

执行如下代码spa

observer(obj);
obj.age.old = '50'

控制台输出: 空
复制代码

4.对监控的obj进行迭代处理prototype

// 修改defineReactive ， 添加一行代码
function defineReactive(obj, key, value) {
  // 若是对象的属性也是一个对象。迭代处理
  observer(value);
  Object.defineProperty(obj, key, {
    //....
  })
}
复制代码

再执行如下代码:

observer(obj);
obj.age.old = '50'

控制台输出:
//数据更新了
复制代码

惋惜的是，若是对象是一个数组，Object.defineProperty就没法起做用了，好比:

obj.skill = [1, 2, 3];
obj.skill.push(4);
控制台输出: 
//空
复制代码

实际上，不止push，包括slice，shift，unshif...都是没有做用.

5. 重写数组的方法

let arr = ['push', 'slice', 'shift', 'unshift'];
arr.forEach(method=> {
  let oldPush = Array.prototype[method];
  Array.prototype[method] = function(value) {
    console.log('数据更新了')
    oldPush.call(this, value)
  }
})
复制代码

再执行如下代码:

obj.skill = [1, 2, 3];
obj.skill.push(4);


控制台输出:
//数据更新了
复制代码

可是，数组的length操做仍然是无效的。这也是为何vue中只能经过方法去改变数组的缘由了。

总结: Object.defineProperty只是解决了状态变动后，如何触发通知的问题，那要通知谁呢？谁会关心那些属性发生了变化呢？之后再说。

感谢阅读！

我是海明月， 前端小学生。

如下完整代码

let obj = {
  name: 'jw',
  age: {
    old: '60'
  }
}

// vue 数据劫持 Observer.defineProperty

function observer(obj) {
  if(typeof obj === 'object') {
    for (let key in obj) {
      defineReactive(obj, key, obj[key]);
    }
  }
}

function defineReactive(obj, key, value) {
  observer(value);

  Object.defineProperty(obj, key, {
    get() {
      return value;
    },
    set(val) {
      console.log('数据更新了')
      value = val;
    }
  })
}
observer(obj);


// obj.age.old = '50'


// Object.defineProperty 对 数组无效
let arr = ['push', 'slice', 'shift', 'unshift'];

arr.forEach(method=> {
  let oldPush = Array.prototype[method];
  Array.prototype[method] = function(value) {
    console.log('数据更新了')
    oldPush.call(this, value)
  }
})
obj.skill = [1, 2, 3];
obj.skill.push(4);
复制代码