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

目录导航

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

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

先来看下示例

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

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

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

$\bullet$ 如果是数组，则调用数组的splice并返回

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

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

最后编辑于：2021.03.14 23:29:39

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

推荐阅读更多精彩内容