大家好,我是大澈!一个喜欢结交朋友的老程序员👨🏻💻,关注我,科技未来或许我能帮到你!
在 Vue2 中,由于 Object.defineProperty 的限制,Vue 无法检测到对象属性的直接新增或删除,以及数组索引的直接新增。
为了让 Vue 监听新增属性的变化,Vue 提供了 Vue.set 方法(或 this.$set)。
原理流程大体如图:
下面一起对 $set 的原理进行拆解。
一、传入非Object
如果传入是 undefined、null 或是 基本类型,则直接抛出错误。
二、传入数组
如果传入是一个数组,就会调用数组的 splice 方法进行实现响应式。
Vue 重写了数组的原生方法(如 push、pop、shift、unshift、splice、sort 和 reverse),这些方法在调用时会自动触发依赖更新,因此通过这些方法修改数组是响应式的。
三、传入对象
如果传入是一个对象,先判断当前 key 在 vm 是否存在,如果存在,说明当前 key 已经是响应式的,就直接进行操作对应的动作。
如果 key 不在 vm 中,就调用 Object.defineReactive 方法将该 key 添加到 vm 上,此时该 key 就有了 getter 和 setter 。最后调用该 key 的 setter 触发通知,走响应式数据更新那一套流程。
当然,Vue 3 不再需要 Vue.set,因为 Proxy 可以自动监听属性的新增和删除!
好了,今天要分享的内容就是这么多,联系和更多内容在绿色App搜【程序员大澈】,最后感谢朋友们给个点赞、分享、推荐,拜拜~