vue源码学习之Object.defineProperty 对数组监听

发布时间：2020-12-17 03:12:34 所属栏目：百科来源：网络整理

导读：中，我们介绍了一下defineProperty 对对象的监听，这一篇我们看下defineProperty 对数组的监听数组的变化先让我们了解下Object.defineProperty()对数组变化的跟踪情况：可以看到，当a.b被设置为数组后，只要不是重新赋值一个新的数组对象，任何对数组内

中，我们介绍了一下defineProperty 对对象的监听，这一篇我们看下defineProperty 对数组的监听

数组的变化

先让我们了解下Object.defineProperty()对数组变化的跟踪情况：

可以看到，

当a.b被设置为数组后，只要不是重新赋值一个新的数组对象，任何对数组内部的修改都不会触发setter方法的执行

。这一点非常重要，因为基于Object.defineProperty()方法的现代前端框架实现的数据双向绑定也同样无法识别这样的数组变化。因此第一点，如果想要触发数据双向绑定，我们不要使用arr[1]=newValue;这样的语句来实现；第二点，框架也提供了许多方法来实现数组的双向绑定。

对于框架如何实现数组变化的监测，大多数情况下，框架会重写Array.prototype.push方法，并生成一个新的数组赋值给数据，这样数据双向绑定就会触发。

实现简单的对数组的变化的监听

var testPush = [];
testPush.proto = arrayPush;
// 通过输出，可以看出上面所述 this 指向的是 testPush
// []
testPush.push(1);
// [1]
testPush.push(2);

在官方文档，所需监视的只有 push()、pop()、shift()、unshift()、splice()、sort()、reverse() 7 种方法。我们可以遍历一下：

;[
'push','pop','shift','unshift','splice','sort','reverse'
].forEach(function(item){
Object.defineProperty(arrayMethods,item,{
value:function mutator(){
//缓存原生方法，之后调用
console.log('array被访问');
var original = arrayProto[item]
var args = Array.from(arguments)
original.apply(this,args)
// console.log(this);
},})
})

完整代码

var p = Observer.prototype;
var arrayProto = Array.prototype
var arrayMethods = Object.create(arrayProto)

;[
'push',})
})

p.walk = function(obj){
var value;
for(var key in obj){
// 通过 hasOwnProperty 过滤掉一个对象本身拥有的属性
if(obj.hasOwnProperty(key)){
value = obj[key];
// 递归调用循环所有对象出来
if(typeof value === 'object'){
if (Array.isArray(value)) {
var augment = value.proto ? protoAugment : copyAugment
augment(value,arrayMethods,key)
observeArray(value)
}
new Observer(value);
}
this.convert(key,value);
}
}
};

p.convert = function(key,value){
Object.defineProperty(this.data,key,{
enumerable: true,configurable: true,get: function(){
console.log(key + '被访问');
return value;
},set: function(newVal){
console.log(key + '被修改，新' + key + '=' + newVal);
if(newVal === value) return ;
value = newVal;
}
})
};

var data = {
user: {
// name: 'zhangsan',age: function(){console.log(1)}
},apg: [{'a': 'b'},3]
}

function observeArray (items) {
for (var i = 0,l = items.length; i < l; i++) {
observe(items[i])
}
}

//数据重复Observer
function observe(value){
if(typeof(value) != 'object' ) return;
var ob = new Observer(value)
return ob;
}

//辅助方法
function def (obj,val) {
Object.defineProperty(obj,{
value: val,enumerable: true,writable: true,configurable: true
})
}

// 兼容不支持proto的方法
//重新赋值Array的proto属性
function protoAugment (target,src) {
target.proto = src
}
//不支持proto的直接修改相关属性方法
function copyAugment (target,src,keys) {
for (var i = 0,l = keys.length; i < l; i++) {
var key = keys[i]
def(target,src[key])
}
}

var app = new Observer(data);
// data.apg[2] = 111;
data.apg.push(5);
// data.apg[0].a = 10;
// console.log(data.apg);

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!