vue2中的$set实现原理

已于 2023-06-13 22:24:09 修改
阅读量282 收藏
点赞数
分类专栏： 前端葵花宝典 文章标签： vue.js
于 2023-06-13 22:23:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45799605/article/details/131197461
版权
该文描述了一种技术，针对数组和对象进行处理，以实现响应式更新。对于数组，使用splice方法使其变响应式；对于对象，通过in方法检查属性并进行修改或添加，最后用defindeRactive确保数据变化触发更新。
摘要由CSDN通过智能技术生成

首先它会判断是不是数组,如果是数组则使用splice方法将数据修改成为响应式
如果是对象使用in方法判断是否在目标对象里面,如果存在直接修改数据
如果不存在添加属性,并赋值最后使用defindeRactive添加响应式
然后通知更新

正函数　
关注
专栏目录
Vue2.0 $set()的正确使用详解
10-15
在ES5环境中，Vue在初始化实例时，会将`data`对象中的属性转化为getter和setter，以实现数据的响应式。但是，如果在实例创建后，直接给对象动态添加属性，Vue不会检测到这个变化，因此不会更新视图。 错误的`$set()...
Vue2响应式原理三：$set
weixin_60855469的博客
07-31 1171
实现思路：为数组和对象创建一个 __ob__属性来存储 Observer实例，并为Observer实例挂载一个 Dep实例来收集 watcher，并在 $set中手动触发。在 Observer实例在挂载一个 Dep实例，并将 Observer实例挂载到属性的 __ob__上。在 defindReactive函数中接收返回的 observer，并收集依赖。如果是数组，则将其添加到数组，并观察新增的值，如果是对象，则将其进行劫持。如果是引用数据类型，则返回 Observer实例。
Vue源码学习之$set实现原理
认定的总要想办法去完成。
07-01 2522
 在Vue2中当我们通过数组的下标去修改数组值，或者向对象添加添加属性时，对应的视图都无法进行更新，这是因为我们所添加的数据不是响应式的，无法响应视图的变化。那么此时我们可以通过$set来实现。对于数组可以通过this.$set(this.arr,0,‘xx’)来去修改数组下标对应的值，对于对象可以通过this.$set(this.obj,‘a’,‘xxx’)向对象新增属性a，接下来我们来根据源码来分析原理。 源码如下：  源码分析如下：  当$set所设置的目标对象为数组时，则调用目标对象的splice方
Vue 2 中的 `$set` 方法详解
最新发布
qq_44977477的博客
09-11 1120
在 Vue 2 中，响应式数据的更新非常重要，因为它确保了当数据改变时，视图能够自动更新。Vue 使用一套高效的机制来追踪依赖并在数据变化时更新视图。然而，在某些情况下，直接修改对象的属性可能不会触发视图更新。这时，`$set` 方法就显得尤为重要。
Vue2中set用法及原理
weixin_33414202的博客
04-10 961
数据更新，但是视图没有更新。因为 Object.defineProperty()限制，监听不到数组的变化，无法监听新增属性
Vue2面试题：说一下$set的作用和原理？
m0_74802419的博客
01-04 899
对象： 响应式原理：通过触发setter实现更新 对象中后追加的属性、删除已有属性，Vue默认不做响应式处理 解决：this.$set()
【vue源码】$set实现原理
小陈的博客
09-21 4894
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。有需要的小伙伴，可以点击下方卡片领取，无偿分享) 下图是对新增属性处理的代码执。
从vue源码解析Vue.set()和this.$set()
10-18
这两者的实现原理都涉及到 Vue 的响应式系统。在 Vue 源码中，这些方法最终会调用 `../observer/index` 文件中的 `set` 函数。这个函数负责判断目标是否是响应式对象，如果是，则添加新属性并确保属性的变化能够被...
vue3实现v-model原理详解
10-16
Vue 3中v-model的实现原理与Vue 2.x有所不同。Vue 3的v-model不再直接提供双向绑定的语法糖，而是通过新的Composition API以及Proxy对象来实现响应式数据的变化与UI的更新。本文将详细阐述Vue 3中v-model的实现原理...
Vue.set() this.$set()引发的视图更新思考及注意事项
10-18
如果我们使用`Vue.set(arr, 2, 'c')`，不仅可以添加新的元素，还能确保视图得到更新，即使在数组中添加元素之前并未定义该位置。 `Vue.set()` 还可以用来向对象中添加属性。在处理列表循环渲染时，我们可能需要为每...
vue数据双向绑定原理解析（get & set)
11-29
在MVVM（Model-View-ViewModel）架构中，Vue 实现了一种称为“数据双向绑定”的机制，使得视图（View）与模型（Model）之间可以保持同步，即视图的变化会自动反映到模型中，反之亦然。这种机制极大地简化了前端开发...
深入理解vue中的$set
08-30
主要介绍了深入理解vue中的$set,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅谈vue中数据双向绑定的实现原理
08-29
Vue中的数据双向绑定实现原理 在Vue框架中，数据双向绑定是指视图层和数据层之间的相互影响关系。当数据层的数据发生变化时，视图层也会相应地更新；同样，当视图层的数据发生变化时，数据层也会相应地更新。这种...
Vue.set()实现数据动态响应的方法
08-28
在本文中，我们学习了 Vue.set() 方法的使用方法和原理。通过使用 Vue.set() 方法，我们可以轻松地实现数据的实时更新，并提高应用程序的交互性。 希望本文能够帮助大家更好地理解 Vue.set() 方法，并应用于实际...
Vue数据双向绑定原理及简单实现方法
08-27
Vue 数据双向绑定原理及简单实现方法 数据双向绑定是 Vue 框架的核心特性之一，它通过数据劫持结合发布者-订阅者模式来实现的。下面将详细介绍 Vue 数据双向绑定原理及简单实现方法。 一、数据劫持 Vue 中的数据...
深入理解vue.js双向绑定的实现原理
10-20
【Vue.js 双向绑定实现原理】 Vue.js 是一款基于 MVVM 架构的前端框架，它的核心特性之一就是响应式的数据绑定系统。双向绑定使得数据模型(model)和视图(view)之间能实时同步，无需手动操作 DOM。下面将详细解释 ...
vue2中$set的原理_它对object属性做了啥?
热门推荐
编程知识分享，主打前端
03-19 3万+
vue2的$set发生了什么？
Vue2中$set的使用
凯凯凯凯凯凯凯凯
12-02 7622
Vue2中$set的使用，如何一定程度上解决双向数据绑定的缺陷
vue this.$set的原理
08-22
- *2* [Vue源码学习之$set实现原理](https://blog.csdn.net/liu19721018/article/details/125554525)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

正函数　

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值