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

目录导航

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容