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

相关推荐
本末倒置1836 分钟前
Svelte邪修的JSDoc,到底是个啥?
前端·javascript·面试
李明卫杭州12 分钟前
CSS中的background-clip详解
前端·javascript
荻酷社区26 分钟前
HTML+CSS+JavaScript实现的AES加密工具网页应用,包含完整的UI界面和加密/解密功能
javascript·css·html
彭于晏爱编程33 分钟前
密码的,YOU不能不知道的Next.jsSSR(服务端渲染)
前端·javascript·react.js
yvvvy1 小时前
前端性能优化全家桶:从重绘重排到面试连招,一篇搞懂
前端·javascript·面试
小蒜学长1 小时前
vue家教预约平台设计与实现(代码+数据库+LW)
java·数据库·vue.js·spring boot·后端
串串狗xk1 小时前
使用 webgl 写的新概念笔记应用《赛博城寨》,在三维开放世界里写笔记
javascript·webgl
页面仔Dony2 小时前
流式数据获取与展示
前端·javascript
前端进阶者2 小时前
electron-vite_20外部依赖包上线后如何更新
前端·javascript·electron
阿虎儿3 小时前
TypeScript 内置工具类型完全指南
前端·javascript·typescript