vue源码解读--Vue.set(Array)
2021-01-24 本文已影响0人
习惯水文的前端苏
上一节我们在分析Object类型时留了一个疑问,为什么调用数据的方法直接就可以使得触发更新?
先看下本节的示例
和上一次一样,代码不会如我们期望的那样在两秒后更新为9999,仍然需要调用Vue.set方法才行
上一节我们说过,如果是数组的话,将执行以下逻辑
通过Math.max重置数组的长度,如果是新增则扩大1否则不变
调用数组的splice,然后over!!!
那么,为啥这样就行了呢?我瞅着它也没干啥"黑科技"的操作啊。别急,往下看
在array.js中,对如下方法进行了重写
重写函数为
当访问原型上的指定方法时会触发Object.defineProperty,并对value求值。对于push、unshift、splice方法将调用ob.observeArrayj将每一个值观测起来
接着遍历数组每一个元素,并将每一个观测起来
最后调用ob.dep.notify发布广播重新渲染,这样vue就能将我们新的值正确patch到dom上啦