vue源码解读--Vue.set(Array)

目录导航

上一节我们在分析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上啦