vue数据劫持 ajax,3分钟了解vue数据劫持的原理实现

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

大致原理是这样的：

定义一个监听函数，对对象的每一个属性进行监听

通过Object.defineProperty对监听的每一个属性设置get 和 set 方法。

对对象实行监听

对对象内嵌对象进行处理

对数组对象进行处理

1. 先定义一个对象

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. 到这里初版已经实现了。尝试一下吧

observer(obj);

obj.name = 'haha'

控制台输出:

//数据更新了

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

let obj = {

name: 'jw',

age: {

old: 60

}

}

执行以下代码

observer(obj);

obj.age.old = '50'

控制台输出: 空

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

// 修改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.age.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);

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。