vue给对象添加属性没有响应式的问题

卯足劲往前冲

已于 2022-07-30 16:49:36 修改

阅读量2.5k

点赞数 2

文章标签：前端 vue.js

于 2022-07-30 16:42:41 首次发布

本文链接：https://blog.csdn.net/weixin_47190975/article/details/126074185

版权

Vue2的响应式原理基于对象代理，get和set方法在访问和修改对象时起作用。然而，直接给对象添加新属性不会触发响应式更新。为了解决这个问题，Vue提供了`this.$set`或`Vue.set`方法，用于添加带有响应式的属性。

摘要由CSDN通过智能技术生成

vue2的响应式原理使用的是对象代理去实现的,对象代理中有一个get和set方法,当我们访问对象的时候就会触发get方法,当我们对对象中的值进行修改时会触发set方法。

但是当我们给对象添加一个新的属性时对象代理是检测不到的,所以就会出现直接给对象添加属性响应式不生效的问题。

在vue中可以使用this.$set(对象名,'属性名',属性值)的方法去给对象添加属性,或者使用Vue.set(对象名,'属性名',属性值)的方法进行添加,添加之后的属性就带有响应式了!!

this.$set(this.goodsdata, 'isShow', false)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

卯足劲往前冲

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
vue给对象添加属性没有响应式的问题

vue给对象添加属性没有响应式的问题
复制链接

扫一扫

浅谈 Vue2 数组对象新增属性，响应式失效问题

chenyajundd的博客

08-02

1574

Vue2 数组对象，动态添加对象属性，vue响应式失效，页面监听不到新增属性的变化。

Vue2中向页面额外添加数据和更改数组不触发响应式问题

Allurewuhui的博客

03-06

1960

新增属性、删除属性, 界面不会更新。当想动态的向 data 中添加数据，例如调用一个方法，向已有对象中添加一个属性，想要实现响应式，需要调用组件实例对象身上的 $set方法，或者调用 Vue 身上的 set 方法。直接通过下标修改数组, 界面不会自动更新。 1.调用组件实例对象身上的 $set方法，或者调用 Vue 身上的 set 方法。 2.调用数组身上的方法进行修改 // 想使用Vue身上的方法需要先引入 import Vue from 'vue' // 动态更新数据--向已有对象中

参与评论您还未登录，请先登录后发表或查看评论

面试官：你知道怎么解决vue2响应式丢失吗？

最新发布

zayyo的博客

07-18

1107

但是通过遍历劫持对象的所有属性来实现响应式数据的方式，并不完美，存在很多缺点。例如当我们通过数组下标去修改数据时或者修改数组的长度、给对象不存在的属性赋值、或者使用delete删除对象的属性，这几种方式都不会被vue监听到，从而导致响应式丢失，视图不更新的问题。直接修改数组索引不会触发视图更新，但使用数组的变异方法（如 splice()、push()、pop()、shift()、unshift()、splice()、sort()、reverse() 等）可以保持响应式。

Vue如何用vm.$set()解决对象新增属性不能响应的问题 ?

zy1992As的博客

05-03

695

为了解决这个问题，Vue提供了一个特殊的方法vm.$set(object, propertyName, value)，也可以使用全局的Vue.set(object, propertyName, value)方法。如果你需要动态地添加属性到对象的数组中，可以使用数组的push()方法或splice()方法，因为Vue能够检测到这些数组方法的调用并更新视图。总结起来，通过使用push()方法或splice()方法向数组中添加新元素，Vue能够检测到数组的变化并更新视图。

20230628----重返学习-自定义指令的玩法和作用-对象新增属性不能响应的问题-Vue组件中的data属性-Vue生命周

seetoyou的博客

06-29

264

面试题：自定义指令的玩法和作用在我之前的项目中，有些需求我是基于创建自定义指令完成的。我觉得这也算是一种封装技巧，把一些要实现的功能，封装成为自定义指令，以后基于v-xxx进行调用，用起来也很方便！比如我之前封装过：v-power 实现权限的校验。在自定义指令内部，获取登录者具备的权限标识，根据传递进来的需要判断的标识，验证当前登录者是否具备相应的权限，从而控制元素的渲染和销毁。v-debounce/throttle 实现函数的防抖和节流。

vue给对象添加属性，无法与视图响应（已解决）

大前端

10-11

1574

问题：vue中，给data中的某个对象添加属性，无法与页面响应解决方法：方法一：直接在对象中写上属性 data() { return { //错误写法 //handle_form: {}, //正确写法 handle_form: { ruleName: '' }, } } 方法二：通过$set赋值 //错误写法 this.handle_form.rule

vue给对象动态添加属性和值的实例

10-16

本文介绍了在Vue中如何动态地给对象添加属性和值，并通过实例展示了动态属性添加在实际开发中的应用场景，如根据条件请求不同的接口。掌握了这种方法，可以使我们的代码更加灵活，并能更好地处理复杂的业务逻辑。 ...

VUE 实现动态给对象增加属性，并触发视图更新操作示例

10-15

需要注意的是，`Vue.set`不能用于给根级数据对象（即直接在`data`选项中声明的属性）动态添加属性。如下面的无效示例所示： ```html ()" value="setName"> var vm = new Vue({ el: "#app", data: {}, ...

对VUE中的对象添加属性

10-18

本篇文章将探讨如何在Vue中对对象添加属性，并结合一个具体的案例来演示这一过程。 1. **对象属性的动态添加** 在Vue中，当你从接口获取数据后，可能需要在原有数据的基础上增加额外的属性以满足业务需求。比如，...

解决vue中对象属性改变视图不更新的问题

08-27

总之，当遇到Vue中对象属性改变而视图未更新的情况时，应避免直接修改对象属性，而是采用上述方法之一来确保Vue的响应式系统可以正常工作。这不仅能保证数据驱动视图的正确性，还能防止潜在的bug和意外行为。在开发...

Vue怎么解决对象新增属性不能响应的问题？

gaotlantis的博客

05-22

185

如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理。我们都知道，Vue 无法检测到对象属性的添加或删除。如果目标是数组，直接使用数组的 splice 方法触发相应式；来实现为对象添加响应式属性，那框架本身是如何实现的呢？

vue给对象(数组)添加属性的时候，无法达到响应式的效果，页面无法即时更新

JunVei的博客

08-21

1672

当我们给对象或者数组添加一个属性的时候，会发现通过打印，可以在控制台看见数据已经更新，但是页面却没有成功渲染上。

vue3中对对象增添属性也会加入到响应式

weixin_51441777的博客

11-20

4231

vue3

vue列表循环的非响应式情况

杨伯聿博客

08-01

203

html: <div id="app"> <button @click="modifyFirst">修改为休息</button> <ul> <li v-for="item in todos" :key="item.id"> <p>{{it...

Vue-给对象新增响应式属性（使用Vue.$set()或者Object.assign()）

热门推荐

陈坚泓的博客

10-30

2万+

Vue.$set给对象新增属性在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，不会更新视图。根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性...

Vue 为对象新增属性后不触发视图更新

noscallion的博客

10-15

391

对于vue的data里面已经声明的对象，当向其中添加新的属性时，vue不会触发视图更新。对于这一问题。可以使用this.$set()来解决，详见我之前的文章。但是有时这样仍然不能解决问题，我就碰到了这种情况。我想到一种非常搞的方法，可以巧妙的解决这一问题。 //在data数组里再添加一个空对象，然后把它删掉 var temp = {} this.companyList.push(temp) var index = this.getIndex(this.companyList, {}) this.com

前端面试：Vue中给对象添加新属性页面不刷新原因及解决方案

qq_43592064的博客

05-31

1106

Vue中给对象添加新属性页面不刷新原因及解决方案

Vue中给数据添加属性不显示的问题（Vue.set的使用）

qq_41983641的博客

02-06

1633

有时我们在页面渲染后再给某一个数据对象添加或删除一个属性时，控制台显示已经添加但是实际的显示结果没有改变，这是因为在初始化的时候会对当前已有的对象属性调用getter和setter方法才会实现响应式，后面添加的不在其中。所以需要调用Vue.set方法进行数据更新。 //一般在数据更改后调用 //this.data 是要更改的数据源，index 是索引 this.$set(this.data,index,this.data[index]) ...

vue2响应式样式失效

qq_55681529的博客

06-27

219

解决方法2，利用$set方法：向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。body代码，给每个for循环渲染的节点绑定一个点击事件。一开始我用的下标来进行判断高亮显示，但是进行增删查操作，再进行点击样式就乱套了。在做一个菜单列表的时候，点击那个节点那个进行高亮显示，会对其进行增删改查，样式如下。最开始的解决办法是用的是$event事件来进行处理,但是会造成资源消耗，重排重绘。js代码，判单点击的事件是存在的，判单不能点击别的样式类名。