众所周知,vue的数据绑定原理是Object.defineProperty(),当数据改变时,触发set函数,之后作出响应。最近碰到个问题,请看下面代码:
let a = {};
Object.defineProperty(a,'b',{
get:function(){
console.log('get runs')
return this.value
},
set:function(newval){
console.log('set runs');
this.value = newval
}
})
a.b = [1,2,3]; //set runs
a.b.push(5); // get runs
可以看到push()只能触发get函数(虽然b确实改变了),那么vue是如何监听push从而作出响应的,在网上看了一遍源码,还是不懂,只能跑来这里问啦,谢谢啦
vue 里的这几个数组变异方法都是经过修改的,并不是原生方法。
调用的时候额外做了点工作。(通知 watcher、新增的数组内容 observable化)
核心源码