前端开发那些事儿

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

2021-01-24  本文已影响0人  习惯水文的前端苏

目录导航

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

先看下本节的示例

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

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

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

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

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

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

重写函数为

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

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

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

上一篇下一篇

猜你喜欢

热点阅读