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

时间:2023-03-10 02:18:49
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的