美文网首页前端开发那些事儿
vue源码解读--Vue.set(Object)

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

作者: 习惯水文的前端苏 | 来源:发表于2021-01-23 10:51 被阅读0次

目录导航

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

当时只知道不会触发且可以使用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

相关文章

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

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

  • Vue.set()和this.$set()区别

    Vue.set()的源码import { set } from '../observer/index'...Vue...

  • 2019-10-11

    vue源码解读（一） 1.Object.defineProperty的深入简出 标题 ...

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

    上一节我们在分析Object类型时留了一个疑问，为什么调用数据的方法直接就可以使得触发更新？ 先看下本节的示例 和...

  • vue查缺补漏

    Object.defineProperty有缺陷，就是无法监控到对象属性临时添加的属性，必须使用VUE.set($...

  • vue this.$set

    对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, pr...

  • vue

    对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, pr...

  • uni-app动态添加根级别的响应式属性

    对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, pr...

  • Vue数据响应思路（五）—— 实现Vue.set

    Vue.js 中， Vue.set 和 vm.$set 是一回事，其中 vm.$set 是 Vue.set 的别名...

  • VUE api等

    全局 api Vue.nextTick Vue.set( target, propertyName/index, ...

网友评论

    本文标题：vue源码解读--Vue.set(Object)

    本文链接：https://www.haomeiwen.com/subject/usfezktx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    前端开发那些事儿

    关于我们|服务条款|联系我们|vue源码解读--Vue.set(Object)|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！