3个 Vue $set 的应用场景

大家好，我是大澈！一个喜欢结交朋友、喜欢编程技术和科技前沿的老程序员👨🏻‍💻，关注我，科技未来或许我能帮到你！

在 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搜【程序员大澈】，最后感谢朋友们给个点赞、分享、推荐，拜拜~