Vue数据响应式是怎么做到的?

487 阅读1分钟

2020年3月15日
《每日一题系列🚀》
作者:王二狗
博客:掘金思否知乎简书CSDN
点赞再看,养成习惯,每日一题系列会一直更新下去,你们的支持是我持续分享的最大动力😘

如何追踪变化

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter

当页面使用或修改对应属性时,首先会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作(发布订阅)。

响应式数据

受现代 JavaScript 的限制,Vue 无法检测到对象属性的添加或删除。

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化,所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

Vue.set this.$set

Vue 不能检测到对象属性的添加或删除,解决方法是手动调用 Vue.set 或者 this.$set

告诫自己,即使再累也不要忘记学习,成功没有捷径可走,只有一步接着一步走下去。 共勉!

文章中如有不对的地方,欢迎小伙伴们多多指正。

谢谢大家~ 💘