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

目录导航

犹记得之前面试的时候被问过一个问题,说如果我在某个方法内对某个对象扩展一个键,是否会触发更新?为什么?怎么解决?

当时只知道不会触发且可以使用Vue.set方法来让其触发更新,但是却并不知道底层到底是怎么实现的

先来看下示例

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

按照我的预期,我希望在两秒钟之后打印出pppp,同时在页面上渲染出9999字样。但是很遗憾,当两秒之后只打印了pppp,而9999并没有被更新到dom上,我们将代码修改成如下便可解决

找到vue.set方法,该方法在initGlobalAPI过程中被添加,值为set函数

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

        对于undefined和基本数据类型没有继续的必要,因为其本身就可以被检测

        如果是数组,则调用数组的splice并返回

        获取到__ob__,该属性是在meta字段创建响应式过程中在添加的,它保存着data和dep(发布者)

        我们这里是对象,因此向下,调用defineReactive,我们知道,defineReactive实际上就是给指定的data设置get和set,当每一次get时去收集依赖,每次set时去派发更新;从代码中可以看出下一行便手动进行了消息派发,当发出广播后,会执行组件的render,而在render过程中便会访问meta.hellow,此时将会把watch进行收集并在update过程中patch为dom

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