为什么要使用 Vue.set(object, key, value)

最新推荐文章于 2024-09-13 04:23:27 发布
原创 最新推荐文章于 2024-09-13 04:23:27 发布 · 4.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Vue

博客围绕Vue展开，但具体内容缺失，推测可能涉及Vue在前端开发中的应用、特性等信息技术相关内容。
探讨 Vue 2 源码中响应式属性添加/删除的限制，以及 `Vue.set` 和 `Vue.delete` (或 “/“) 的源码实现。
weixin_41455464的博客
08-04 465
但是，后来你又偷偷加盖了一个房间，或者拆掉了一个房间，监控系统就懵逼了，完全不知道发生了什么。它的作用，就是绕过 Vue 的限制，以一种“正确”的方式添加属性，并且确保这个新属性也是响应式的。也就是说，如果你动态地给对象添加一个属性，或者删除一个属性，Vue 是不知道的，也就没法触发响应式更新了。的本质，就是绕过了 Vue 的响应式限制，手动地给对象添加响应式属性，并触发更新。放心，我会尽量用大白话，争取让大家听得懂，记得住。的本质，就是绕过了 Vue 的响应式限制，手动地删除对象的属性，并触发更新。
从vue2源码看为什么需要使用Vue.set()和this.$set()
qq_36348403的博客
01-06 1121
从源码层次看vue提供的vue.set()和this.$set()这两个api还是很简单的，由于本文没有详细解释vue依赖收集和触发，所以有的地方说的还是很模糊。在后续文章中我们会进行vue3源码的解读，从源码出发讲清楚vue3中为什么不再需要使用Vue.set()和了。
vue.set()的用法及原因
chongyane8438的博客
03-29 558
export default{ props:{ food:{ typr:Object } }, methods:{ addCart(){ if(!this.food.count){ this.food.count = ...
Vue.set作用
不是独角兽的博客
05-01 2012
Vue.set 的作用就是在构造器外部操作构造器内部的数据、属性或者方法
vue中，this.$set的使用-this.$set(obj, key, value)和vue.set(obj, key, value)——给对象添加属性，而且视图层会响应该数据的变化
weixin_44867717的博客
08-30 803
js
vue双向数据绑定this.$set(obj, key, value)的使用
PENG124z的博客
02-23 1252
this.$set(obj, key, value) 当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式 进行展示； 增加了 图片拖拽 功能，
Vue实战指南：理解Vue.set方法：原理、流程和代码演示
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
09-13 2596
在使用Vue.js框架进行Web应用开发的过程中，我们经常需要处理数据的变化。使用此方法可以确保属性的变化会被Vue检测到，并触发相应的视图更新。在使用Vuex进行状态管理时，我们也需要确保在修改状态时使用响应式的方法。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。有时，我们需要处理非响应式的数据结构，如深层嵌套的对象或数组。一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身农奴把歌唱，来确保所有层级的数据都是响应式的。
从vue源码解析Vue.set()和this.$set().docx
01-22
如果 target 是一个数组，并且 key 是一个有效的数组索引，那么 Vue.set()就会使用 splice 方法来修改数组： `if (Array.isArray(target) && isValidArrayIndex(key)) { target.length = Math.max(target.length, ...
Vue.set()动态的新增与修改数据,触发视图更新的方法
10-18
- 在Vue实例初始化之后，才应该使用`Vue.set`或`this.$set`。 - 直接使用索引来更新一个数组项，或者使用`Object.prototype`上的方法添加对象属性，都不会触发视图更新。 - 在Vue 2.x中，直接向`vm.$data`对象添加新...
vue里$set
sunshine_cui的博客
12-24 298
vue里$set: this.#set(obj, key, value) 在项目开发中，经常会遇到这样问题，为data中的某一个对象添加一个属性 但是从控制台打印中可以看到属性已经添加到对象里了，但是视图（页面）里没有展示。在这里我们发现虽然这个对象身上已经有了该属性，但是视图层并没有更新该数据，是什么造成的呢？由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图
vue遍历数据接口中的数组，Object.keys、Object.values
qq_49280344的博客
01-08 3035
1.如果请求数据code状态码等于200 2.遍历data数据创建一个新数组 3.用Object.keys（处理数组，返回索引值数组）将数组中索引赋值给新数组中的属性名 4.用Object.values（返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历属性的键值）将数组中的属性值返回给新数组 ...
VUE展示数据--object里面的value为一个数组
weixin_34192732的博客
05-07 4507
VUE展示数据--object里面的value为一个array, 其他的都是正常展示. 遇到的难点在于需要把每一项的数组里面的第0,1,2,3..项求和. 数据结构如图所示: 需要展示的样式如图所示: 代码: HTML部分: <table id="app-1"> <thead> <tr v-for="(values, keys) in ...
Vue.set()方法的使用
weixin_45875464的博客
04-22 572
解决在修改数组或对象的值时，数组或对象的内容发生变化，但是视图不更新的问题。 Vue.set(obj,key,value) 要修改对象obj 要修改的键key 要修改为的值value
vue.js js 字典 object动态key
carbonzhao的专栏
06-25 950
最近很火的一段话：无论你坚持什么样的道德价值体系，最终还是会走向消亡。无论你信奉什么样的普世价值，只不过是困着自己而已。最近又在折腾这千刀万剐的JS，这不又遇到了一个活王八：给对象动态添加key属性。炎炎夏日，这活该热死人的天气，又十分想念冬天的寒冷。
vue.set的使用
weixin_41790041的博客
05-16 272
调用方法：Vue.set( target, key, value )target：要更改的数据源(可以是对象或者数组)key：要更改的具体数据value ：重新赋的值
理解 Vue.set 方法：原理、流程和代码演示
大剑师兰特的GIS世界
02-26 2840
Vue.set 方法的主要作用是向响应式对象中添加一个新属性，并确保新属性同样是响应式的。这个方法的实现原理依赖于 Vue 的数据响应式系统，通过 Object.defineProperty 方法将新属性添加到对象上，并设置 getter 和 setter。在使用 Vue.set 时，需要注意其适用范围和注意事项，以确保正确地使用。
Vue.set的使用
Aiolimp的博客
09-23 264
Vue 无法检测到对象属性的添加和删除。对于已经创建的实例，Vue 不能动态添加根级别的 响应式属性，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。 object：要更改的数据源(可以是对象或者数组) key：要更改的具体数据 value ：重新赋的值 <template> <div> <p v-for="item in items" :key="item.id">{{item.name}}<
vue2中操作对象的方法
weixin_69811594的博客
05-10 1686
vue2中操作对象的方法
Vue.set和Vue.delete的底层原理是什么？
最新发布
06-06
<think>我们正在讨论的是Vue.set和Vue.delete的底层实现原理。根据之前的引用，特别是引用[3]提到，Vue.set和Vue.delete是从'../observer/index'导入的set和del函数，并且挂载到Vue原型上作为实例方法。因此，我们需要分析set和del这两个函数的源码实现。首先，从Vue的响应式原理我们知道，Vue通过Object.defineProperty来劫持对象属性的getter和setter，从而实现响应式。但是这种方式有一个限制：无法检测到对象属性的添加和删除（因为getter/setter在初始化时定义）。所以Vue提供了Vue.set和Vue.delete（以及实例方法vm.$set和vm.$delete）来解决这个问题。下面我们将分析set和del的源码（基于Vue2.x版本，因为Vue3中已经改用Proxy，不再需要这两个API）。源码位置：src/core/observer/index.js我们先看set函数：1.判断目标对象是否是数组，并且key是有效的数组索引。如果是，则通过splice方法添加（因为Vue重写了数组的splice方法，所以能触发更新），并返回设置的值。2.如果key已经存在于目标对象中，则直接赋值，因为属性已经是响应式的，赋值就会触发依赖更新。3.如果目标对象是Vue实例，或者目标对象是根数据（data的根对象），则直接赋值并警告（在开发环境）？4.如果目标对象不是响应式的，则直接赋值。5.如果以上都不是，说明需要给一个响应式对象添加新属性，那么我们就需要调用defineReactive将这个新属性转为响应式，然后手动触发依赖更新。接着看del函数：1.判断目标对象是否是数组，并且key是有效的数组索引，则通过splice删除（同样能触发更新）。2.如果目标对象是Vue实例，或者是根数据，则警告（开发环境）。3.如果属性不存在于目标对象，直接返回。4.删除属性，然后如果目标对象是响应式对象，则手动触发依赖更新。下面我们具体引用源码片段（简化）进行说明。注意：在引用源码时，由于我们无法直接看到最新源码，我们根据引用[3]和引用[4]以及常见的源码分析文章进行说明。同时，为了符合用户要求，我们使用中文解释，并且按照系统指令，对公式（如果有）使用LaTeX格式。由于问题中没有数学公式，所以重点在代码和文字解释。回答结构：1.概述Vue.set和Vue.delete的作用2.分析Vue.set（set函数）源码3.分析Vue.delete（del函数）源码4.总结最后，生成相关问题。注意：在回答中，如果引用了之前的引用内容，需要在末尾添加引用标识，如[^1]。</think> ### Vue.set 和 Vue.delete 底层原理分析 #### 一、核心实现机制 Vue.set 和 Vue.delete 的核心目标是**解决 Vue 响应式系统的限制**： 1. Vue 无法自动检测**对象新增属性** 2. Vue 无法自动检测**属性被删除** 这两个 API 的底层实现依赖于 Vue 的**响应式系统**和**依赖收集机制**： 1. 所有响应式对象都会关联一个 `Observer` 实例（存储在 `__ob__` 属性） 2. 当数据变化时通过 `Dep` 类通知所有 `Watcher` 更新视图 3. 源码位置：`src/core/observer/index.js` ```javascript{1,3,5} // 简化后的源码结构 export function set(target: Object | Array, key: any, val: any): any { if (Array.isArray(target)) { target.splice(key, 1, val) // 特殊处理数组 return val } // 关键响应式处理 defineReactive(ob.value, key, val) ob.dep.notify() // 触发视图更新 } ``` #### 二、Vue.set 源码解析 当向对象添加新属性时： 1. **检查对象是否响应式**： ```javascript const ob = target.__ob__ if (!ob) { // 非响应式对象直接赋值 target[key] = val return val } ``` 2. **定义响应式属性**： ```javascript defineReactive(ob.value, key, val) ``` 3. **触发依赖更新**： ```javascript ob.dep.notify() // 关键步骤！ ``` 4. **特殊数组处理**： ```javascript target.splice(key, 1, val) // 利用重写的数组方法 ``` #### 三、Vue.delete 源码解析 当删除对象属性时： 1. **检查删除限制**： ```javascript if (target._isVue || (ob && ob.vmCount)) { warn('禁止删除 Vue 实例属性') return } ``` 2. **执行属性删除**： ```javascript delete target[key] ``` 3. **触发依赖更新**： ```javascript ob.dep.notify() // 通知所有依赖 ``` #### 四、响应式原理示意图 Vue.set/Vue.delete 的响应式工作流程： ``` ┌─────────────┐ ┌───────────┐ ┌────────────┐ │ 修改数据 │ ────▶ │ Observer │ ────▶ │ Dep.notify │ └─────────────┘ └───────────┘ └────────────┘ │ ▲ │ │ defineReactive() │ ▼ └──────────────────────┘ ┌──────────────┐ │ Watcher 更新 │ │ 视图渲染 │ └──────────────┘ ``` #### 五、使用场景对比 | **操作类型** | 常规操作 | Vue.set/Vue.delete | |--------------|----------------|--------------------------| | 对象新增属性 | 非响应式 | ✅ 触发视图更新 | | 数组索引赋值 | 非响应式 | ✅ 特殊处理 | | 删除属性 | 非响应式 | ✅ 触发更新 | | 根数据对象 | ⚠️ 禁用 | ⚠️ 禁用[^4] | > 💡 在 Vue 3 的 Composition API 中，这些 API 已被**响应式 ref/reactive** 机制替代[^2]。 --- ###相关问题 1. Vue.set 在数组操作中的应用场景有哪些？ 2. Vue.delete 在什么情况下会导致警告？[^4] 3. Vue 3 中替代 Vue.set 的新方案是什么？[^2] 4. Observer 和 Dep 如何协同工作实现响应式？ 5. 为什么直接删除对象属性不会触发视图更新？ [^1]: 对象新增属性处理逻辑 [^2]: Vue 3 替代方案实现差异 [^3]: 响应式系统核心源码位置 [^4]: 根数据操作限制说明
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值