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

相关推荐
二哈喇子!1 小时前
jQuery从入门到应用:选择器、DOM与Ajax综合指南
前端·javascript·ajax
我也爱吃馄饨1 小时前
Json实现深拷贝的缺点
前端·javascript·json
计算机学姐1 小时前
基于Asp.net的医院病历管理系统
vue.js·vscode·后端·mysql·sqlserver·c#·asp.net
计算机学姐1 小时前
基于Asp.net的汽车租赁管理系统
vue.js·后端·mysql·sqlserver·c#·汽车·asp.net
Cirrod1 小时前
react加antd封装表格单、多选组件,支持跨页选择缓存
javascript·react.js·缓存
丁总学Java2 小时前
解锁 vue-property-decorator 的秘密:Vue 2 到 Vue 3 的 TypeScript 之旅!✨
前端·vue.js·typescript
MandiGao2 小时前
ECharts 3D地球(铁路线、飞线、标点、图标、文字标注等)
前端·vue.js·3d·echarts
一个处女座的程序猿O(∩_∩)O2 小时前
Vue 过滤器深度解析与应用实践
前端·javascript·vue.js
Dolphin_海豚2 小时前
10 分钟带你入坑 electron
前端·javascript·electron
乐闻x2 小时前
性能优化:javascript 如何检测并处理页面卡顿
前端·javascript·性能优化