vue深入学习————对数组类型的拦截及处理

Object.defineProperty

每当面试问vue原理的时候，我往往只会说一句话，利用Object.definePrototype来数据劫持，实现响应式。
然后就没有然后了…

先认识认识它到底是干嘛用的

首先他有三个参数：

1. obj:要在其上定义属性的对象
2. prop:要定义或修改的属性的名称。
3. descriptor:将被定义或修改的属性描述符。

第三个参数descriptor是一个对象，它用来描述该obj的prop(要定义或修改的属性的名称)
属性列表如下:

• configurable:当且仅当该属性的 configurable 为 true 时，该属性描述符才能够被改变，同时该属性也能从对应的对象上被删除。默认为 false。
• enumerable:当且仅当该属性的enumerable为true时，该属性才能够出现在对象的枚举属性中。默认为 false。
• value:该属性对应的值。可以是任何有效的 JavaScript 值（数值，对象，函数等）。默认为 undefined。
• writable:当且仅当该属性的writable为true时，value才能被赋值运算符改变。默认为 false。
• get:一个给属性提供 getter 的方法，如果没有 getter 则为 undefined。当访问该属性时，该方法会被执行，方法执行时没有参数传入，但是会传入this对象（由于继承关系，这里的this并不一定是定义该属性的对象）。
• set:一个给属性提供 setter 的方法，如果没有 setter 则为 undefined。当属性值修改时，触发执行该方法。该方法将接受唯一参数，即该属性新的参数值。

var obj={}
Object.defineProperty(obj,'method',{
	value:function(){
		console.log('去执行一些事情')
	}
})
obj.method()//去执行一些事情

可见Object.defineProperty帮住obj添加了method的属性。

作用

这能做什么呢？
Object.defineProperty拦截不到数组的任何方法，用该方法就能拦截到操作数组的方法。并且vue源码中就是用该方法。我们可以在value函数中写上响应式的逻辑代码。

//需要用到的数组方法
let arrayMethods=['push','pop']
//新建一个空对象
let proxyArrayMethod={}
//遍历arrayMethods
arrayMethods.forEach(res=>{
	//往proxyArrayMethod对象中加入push和pop属性，并实行push和pop功能
	Object.defineProperty(proxyArrayMethod,res,{
		value:function(){
			//this指向调用该方法的数组
			Array.prototype[res].apply(this,arguments)
		}
	})
})
let arr=[]
//这步非常重要，让数组继承proxyArrayMethod中的方法，这时调用的就不是原生的push方法了，而是我们新增的方法！！！
arr.__proto__=proxyArrayMethod
arr.push(1)

这样就成功push了一个元素到arr中。
想知道如何实现响应式，请期待下次。