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

相关推荐
苹果电脑的鑫鑫30 分钟前
在使用element-ui时表单的表头在切换页面时第一次进入页面容易是白色字体解决方法
javascript·vue.js·ui
忧郁的蛋~39 分钟前
JavaScript性能优化的12种方式
开发语言·javascript·性能优化
海盗强43 分钟前
prototype和proto的区别
开发语言·javascript·原型模式
潜龙在渊灬1 小时前
杂谈:前端 UI 框架和 UI 组件库的区别
javascript·vue.js·react.js
前端snow1 小时前
爬取数据利用node也行,你知道吗?
前端·javascript·后端
村头一颗草1 小时前
高德爬取瓦片和vue2使用
前端·javascript·vue.js
远山无期1 小时前
vue3+vite项目接入qiankun微前端关键点
前端·vue.js
一袋米扛几楼981 小时前
【Node】Node.js环境变量配置,及下载地址
javascript·网络·node.js
还是鼠鼠1 小时前
Node.js--exports 对象详解:用法、示例与最佳实践
前端·javascript·vscode·node.js·web
Moment1 小时前
前端性能指标 —— FMP
前端·javascript·面试