如何解决Vue中给data中的对象属性添加一个新的属性时响应式不生效的问题?

2024-09-04 14:36

本文主要是介绍如何解决Vue中给data中的对象属性添加一个新的属性时响应式不生效的问题?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

vue2的响应式原理使用的是对象代理去实现的,对象代理中有一个get和set方法,当我们访问对象的时候就会触发get方法,当我们对对象中的值进行修改时会触发set方法。但是当我们给对象添加一个新的属性时对象代理是检测不到的,所以就会出现直接给对象添加属性响应式不生效的问题。

在Vue中,给data中的对象添加一个新属性时,Vue默认不会检测到这个属性的添加,因此,不会触发视图的更新。为了解决这个问题,也就是说怎么才能添加响应式的属性呢?Vue提供了几种方法来添加响应式属性:

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

示例参看:vue给对象添加属性没有响应式的问题及解决_vue.js_脚本之家

- 使用Vue.set()方法:

Vue.set(vm.someObject, 'newProp', 'value');

通过Vue.set向响应式对象中添加一个property,并确保这个新 property同样是响应式的,且触发视图更新。

- 使用对象的$set()方法(实例方法):

 this.$set(this.someObject, 'newProp', 'value');

番外:Vue.set 方法接收三个参数:

  1. {Object | Array}  target: 响应式对象

  2. {string | number} key: 要设置的属性名  ——propertyName / index

  3. {any} value: 属性值

Vue.set( target, propertyName/index, value )

关于Vue.set源码(省略了很多与本节不相关的代码)

源码位置:src\core\observer\index.js

注:Vue2.6.12版本的源码可参看:https://www.jb51.net/article/269625.htm 

function set (target: Array<any> | Object, key: any, val: any): any {...defineReactive(ob.value, key, val)ob.dep.notify()return val
}

这里无非再次调用defineReactive方法,实现新增属性的响应式

关于defineReactive方法,内部还是通过Object.defineProperty实现属性拦截

大致代码如下:

function defineReactive(obj, key, val) {Object.defineProperty(obj, key, {get() {console.log(`get ${key}:${val}`);return val},set(newVal) {if (newVal !== val) {console.log(`set ${key}:${newVal}`);val = newVal}}})
}

参考:Vue.set()方法的使用,以及对其进行深入解析

2、使用Object.assign()展开运算符来给对象添加属性,并确保赋值是在Vue的响应式系统的作用范围内:

示例参看:vue给对象添加属性没有响应式的问题及解决_vue.js_脚本之家

直接使用Object.assign()添加到对象的新属性不会触发更新,应创建一个新的对象,合并原对象和混入对象的属性。

// 使用Object.assign
this.someObject = Object.assign({}, this.someObject, { newProp: 'value' });

3、使用展开运算符:'...' 来给对象添加新属性

// 使用展开运算符
this.someObject = { ...this.someObject, newProp: 'value' };

4、使用this.$forceUpdata()函数使得vue强制更新视图和数据(不推荐使用)。

调用强制更新方法this.$forceUpdate()会更新视图和数据,触发updated生命周期。

如果你发现你自己需要在Vue中做一次强制更新,99.9% 的情况,是你在某个地方做错了事。$forceUpdate()方法迫使Vue实例重新渲染。

PS:仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。

示例参看:vue给对象添加属性没有响应式的问题及解决_vue.js_脚本之家

小结

  • 如果为对象添加少量的新属性,可以直接采用Vue.set()
  • 如果需要为新对象添加大量的新属性,则通过Object.assign()展开运算符:'...' 创建新对象
  • 如果你实在不知道怎么操作时,可采取$forceUpdate()进行强制刷新 (不建议)

PS:vue3是用过proxy实现数据响应式的,直接动态添加新属性仍可以实现数据响应式

  • 可以直接采用Vue.set()
  • 如果需要为新对象添加大量的新属性,则通过Object.assign()展开运算符:'...' 创建新对象
  • 如果你实在不知道怎么操作时,可采取$forceUpdate()进行强制刷新 (不建议)

因为vue不能检测到对象属性的添加或者删除,只有在data对象上存在的属性是响应式的,所以要使用Vue.set()方法将响应式属性添加到对象上。同样的道理,(Vue 2.6+)使用Vue.delete()vm.$delete()方法来删除属性,同时Vue也能够检测到属性的删除。

综上所述,以上方法可以确保在Vue中给对象添加或删除新属性时,视图能够正确更新。

参考资料

「Vue面试题」动态给vue的data添加一个新的属性时会发生什么?如何去解决?-CSDN博客

使用Vue.$set()或者Object.assign()修改对象新增响应式属性的方法_vue.js_脚本之家

vue给对象添加属性没有响应式的问题及解决_vue.js_脚本之家

动态给vue的data添加⼀个新的属性时会发⽣什么? 怎样解决? - 简书

Vue 中给 data 中的对象属性添加一个新的属性时会发生什么?如何解决?-CSDN博客

这篇关于如何解决Vue中给data中的对象属性添加一个新的属性时响应式不生效的问题?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1136244

相关文章

MybatisGenerator文件生成不出对应文件的问题

《MybatisGenerator文件生成不出对应文件的问题》本文介绍了使用MybatisGenerator生成文件时遇到的问题及解决方法,主要步骤包括检查目标表是否存在、是否能连接到数据库、配置生成... 目录MyBATisGenerator 文件生成不出对应文件先在项目结构里引入“targetProje

C#使用HttpClient进行Post请求出现超时问题的解决及优化

《C#使用HttpClient进行Post请求出现超时问题的解决及优化》最近我的控制台程序发现有时候总是出现请求超时等问题,通常好几分钟最多只有3-4个请求,在使用apipost发现并发10个5分钟也... 目录优化结论单例HttpClient连接池耗尽和并发并发异步最终优化后优化结论我直接上优化结论吧,

Java内存泄漏问题的排查、优化与最佳实践

《Java内存泄漏问题的排查、优化与最佳实践》在Java开发中,内存泄漏是一个常见且令人头疼的问题,内存泄漏指的是程序在运行过程中,已经不再使用的对象没有被及时释放,从而导致内存占用不断增加,最终... 目录引言1. 什么是内存泄漏?常见的内存泄漏情况2. 如何排查 Java 中的内存泄漏?2.1 使用 J

Spring MVC如何设置响应

《SpringMVC如何设置响应》本文介绍了如何在Spring框架中设置响应,并通过不同的注解返回静态页面、HTML片段和JSON数据,此外,还讲解了如何设置响应的状态码和Header... 目录1. 返回静态页面1.1 Spring 默认扫描路径1.2 @RestController2. 返回 html2

numpy求解线性代数相关问题

《numpy求解线性代数相关问题》本文主要介绍了numpy求解线性代数相关问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 在numpy中有numpy.array类型和numpy.mat类型,前者是数组类型,后者是矩阵类型。数组

Spring常见错误之Web嵌套对象校验失效解决办法

《Spring常见错误之Web嵌套对象校验失效解决办法》:本文主要介绍Spring常见错误之Web嵌套对象校验失效解决的相关资料,通过在Phone对象上添加@Valid注解,问题得以解决,需要的朋... 目录问题复现案例解析问题修正总结  问题复现当开发一个学籍管理系统时,我们会提供了一个 API 接口去

解决systemctl reload nginx重启Nginx服务报错:Job for nginx.service invalid问题

《解决systemctlreloadnginx重启Nginx服务报错:Jobfornginx.serviceinvalid问题》文章描述了通过`systemctlstatusnginx.se... 目录systemctl reload nginx重启Nginx服务报错:Job for nginx.javas

Redis缓存问题与缓存更新机制详解

《Redis缓存问题与缓存更新机制详解》本文主要介绍了缓存问题及其解决方案,包括缓存穿透、缓存击穿、缓存雪崩等问题的成因以及相应的预防和解决方法,同时,还详细探讨了缓存更新机制,包括不同情况下的缓存更... 目录一、缓存问题1.1 缓存穿透1.1.1 问题来源1.1.2 解决方案1.2 缓存击穿1.2.1

Java如何通过反射机制获取数据类对象的属性及方法

《Java如何通过反射机制获取数据类对象的属性及方法》文章介绍了如何使用Java反射机制获取类对象的所有属性及其对应的get、set方法,以及如何通过反射机制实现类对象的实例化,感兴趣的朋友跟随小编一... 目录一、通过反射机制获取类对象的所有属性以及相应的get、set方法1.遍历类对象的所有属性2.获取

Mysql DATETIME 毫秒坑的解决

《MysqlDATETIME毫秒坑的解决》本文主要介绍了MysqlDATETIME毫秒坑的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着... 今天写代码突发一个诡异的 bug,代码逻辑大概如下。1. 新增退款单记录boolean save = s