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

目录导航

上一节我们在分析Object类型时留了一个疑问,为什么调用数据的方法直接就可以使得触发更新?

先看下本节的示例

vue源码解读--Vue.set(Array)_第1张图片

和上一次一样,代码不会如我们期望的那样在两秒后更新为9999,仍然需要调用Vue.set方法才行

上一节我们说过,如果是数组的话,将执行以下逻辑

        通过Math.max重置数组的长度,如果是新增则扩大1否则不变

        调用数组的splice,然后over!!!

那么,为啥这样就行了呢?我瞅着它也没干啥"黑科技"的操作啊。别急,往下看

在array.js中,对如下方法进行了重写

vue源码解读--Vue.set(Array)_第2张图片

重写函数为

vue源码解读--Vue.set(Array)_第3张图片

当访问原型上的指定方法时会触发Object.defineProperty,并对value求值。对于push、unshift、splice方法将调用ob.observeArrayj将每一个值观测起来

        接着遍历数组每一个元素,并将每一个观测起来


最后调用ob.dep.notify发布广播重新渲染,这样vue就能将我们新的值正确patch到dom上啦

你可能感兴趣的:(vue源码解读--Vue.set(Array))