Vue源码之----为什么Vue中Array的pop，push等方法可以reactive，而Array[0]='a'这样的方法不会reactive?

这就要从reactive开始讲起了，粗略的说，js的操作能引起页面上显示的改变，是因为该操作引起了组件的重新渲染，渲染会生成新的虚拟节点，新节点和旧节点会对比，操作浏览器的node进行改变。

vue实例以下简称vm

说具体点

data()方法的返回值以及watch，props，computed里面的属性，，在这之前都会被defineReactive方法重写get和set方法（get方法重写为调用的时候收集Dep这个静态变量指向的watcher，set方法调用的时候会notify收集的watchers，调用每个watcher的update--->run--->get方法）和methods里面的方法一起，被挂载到vm实例上（所以methods里面this.XXX才有用，因为调用method的是 vm，属性也在vm上）

-----------------所以如果想要对象（比如a）的属性b的set方法能引起重新渲染，必须在b被get的时候，收集到可以引起重新渲染的watcher。那么是什么时候收集的呢？

每一个vm有一个render Watcher，在mountComponent的时候生成，render Watcher的expOrFn方法是 vm._update(vm._render(), hydrating)--->vm.__patch__(prevVnode, vnode)，(对比新旧虚拟节点，操作真实node)，在这个过程中，vm._render()会按照Vue的<template>中的内容，为每一个子节点

生成属性，查看render的代码会发现有个with(this)，这里this就是vm，就是要调用vm的属性的get方法给虚拟节点的属性赋值。然后再进行对比等操作。在这个过程中，被调用get方法的属性就会收集renderWatcher。

-----------------那为什么array[0]='a'这样的方法不会重新渲染？

因为array的0这个属性？，没有重写get和set方法

-----------------为什么pop push可以reactive？

比如a.b=c，reactive的过程是: observe(a)---> defineReactive(b)--->重写b的get方法之前先observe(c)。observe c的时候，如果判断c是一个数组，那么c的pop.、push等方法会重新指向，指向后的新方法，先调用Array原来来对应的方法，然后调用_ob_指向的observer的dep的notify方法，通知收集的watcher

-----------------对象的dep从哪里来？

上面说过，observe(c)，new一个Observer 实例childOb，c的_ob_属性指向childOb，childOb里面有一个dep属性，而在b的重写的get方法中，会有childOb.dep.depend()的执行

-----------------灵魂第五问：既然是给b重写set和get的时候，给c的_ob_的dep收集Watcher，那么数组里面的元素比如array[0]=d，而d恰好是数组，为什么d.push也可以reactive？

在childOb.dep.depend()方法下面还有个if，如果属性指向的是个数组，直接递归收集。那么这时候如果是数组的元素是个对象，就不管了，只考虑数组中的元素还是数组的情况。所以array[0]='a'是不能reactive的，但是array[0].push('a')是可以reactive的

巴特西

Vue源码之----为什么Vue中Array的pop，push等方法可以reactive，而Array[0]='a'这样的方法不会reactive?

最新文章

热门文章