vue 两种Object.assign响应式修改对象方式

最新推荐文章于 2024-05-28 15:54:01 发布
最新推荐文章于 2024-05-28 15:54:01 发布
阅读量1.1w 收藏 12
点赞数 6
分类专栏： VUE 文章标签： vue assign
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33576343/article/details/82795112
版权

两种写法

1. this.obj = Object.assign({}, this.obj, {k: v})（推荐写法）

推荐原因： this.obj可能是父级组件传过来的prop，而为了遵循 单向数据流 的设计理念，不直接修改该数据对象，而是生成一个新的数据对象

表达式右侧会生成一个新的对象，this.obj会指向一个新的引用地址（常用于 浅拷贝 对象）

 

2. this.obj = Object.assign(this.obj, {k: v})

表达式右侧只会修改this.obj，this.obj仍然指向原引用地址（常用于 合并 对象）

 

欢迎关注、点赞

LesterWeng
关注
  • 6
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6中新增的Object.assign()方法详解
08-29
`Object.assign()`方法能够处理这两种类型的属性，确保无论是常规的字符串属性还是基于Symbol的唯一属性，都能被正确复制。 2. **属性复制机制** 属性复制是通过赋值操作实现的。这意味着，如果目标对象的属性存在...
Vue中Object.assign()的使用详解
weixin_38345306的博客
08-05 1万+
1.Object.assign()对象的拷贝2.Object.assign()对象的深拷贝3.对象的合并4.合并具有相同属性的对象5.继承属性和不可枚举属性是不能拷贝的6. 原始类型会被包装为对象7.异常打断后续拷贝任务 1.Object.assign()对象的拷贝 Object.assign() 用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 Object.assign(target, …sources) 【target：目标对象】，【souce：源对象（可多个）】 .
ES6 - Object.assign()
a5252145的博客
12-23 358
ES6 - Object.assign() 语法与定义： Object.assign方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）。 Object.assign方法的第一个参数是目标对象，后面的参数都是源对象。 const target = { a: 1 }; const source1 = { b: 2 }; const source2 = {...
Vue 3学习理解 Object.assign浅拷贝
最新发布
李长渊的博客
05-28 1013
Vue 3学习理解 Object.assign浅拷贝
Vue前端Es6语法Object.assign()
m0_49714202的博客
12-16 561
定义:Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。 语法: Object.assign(target, …sources) 参数: target 目标对象 sources 源对象 返回值: 目标对象 描述: 如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后面的源对象的属性将类似地覆盖前面的源对象的属性。 （在具有相同的键情况下,就是后面的值覆盖前面原有的值,括号里个人理解） 示例 复制一个对象 const obj = {
vue使用 Object.assign()巧妙重置data数据
夏天的博客
06-10 5723
vue 使用 Object.assign() 巧妙重置data数据
vue合并对象Object.assign()
weixin_43961652的博客
02-24 1677
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。【简单来说就是合并对象(且是浅拷贝)】
Vue3中使用Object.assign()的问题
zpq103075的博客
12-26 1130
在练习Vue3项目对于一个响应式列表数据在增删的时候重新查询数据时使用Object.assign(data,newData)更新数据到这还一切正常,但在删除数据后调用这个方法时页面却一直没变化.因为增删改最后都是调用的这个方法,还以为是删除的方法写错了,找了好久最后将问题定位在了Object.assign()这个方法.在查询了Object.assign()方法后确定该方法为浅拷贝,这就是增改没问题,删除出现问题的原因.最后解决方法是先把原数据置空,在赋值就行了.
vue源码学习之Object.defineProperty对象属性监听
01-21
本文介绍了vue源码学习之Object.defineProperty对象属性监听，分享给大家，具体如下： 参考版本 vue源码版本：0.11 相关 vue实现双向数据绑定的关键是 Object.defineProperty ，让我们先来看下这个函数。 在MDN上...
响应式企业官方网站模板，使用vue全家桶开发.zip
05-14
响应式企业官方网站模板，使用vue全家桶开发 响应式企业官方网站模板，使用vue全家桶开发 响应式企业官方网站模板，使用vue全家桶开发 响应式企业官方网站模板，使用vue全家桶开发 ...
使用Vue.set()方法实现响应式修改数组数据步骤
10-16
总结来说，`Vue.set()`在处理数组和对象的响应式更新时至关重要，尤其是在直接修改数组元素或添加新属性时。它保证了数据变化与视图更新之间的同步，是Vue开发中不可或缺的一个工具。在实际开发中，当遇到因为直接...
vue重置data数据 神器之Object.assign()
qq_45723621的博客
01-13 1266
例如：用户退出登录，from表单重置数据等等。一行代码搞定
Vue-给对象新增响应式属性（使用Vue.$set()或者Object.assign()）
陈坚泓的博客
10-30 2万+
Vue.$set给对象新增属性 在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，不会更新视图。 根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性...
vue3.0 特殊语法说明
weixin_40228600的博客
11-05 1584
Object.assign()方法用于对象的合并，将源对象（source）的所有可枚举属性，复制到目标对象（target）let和const与var的区别。
Vue2和Vue3时，利用Object.assign()方法对对象数据进行初始化或置空功能的实现。
陈先生的博客
02-15 3327
点击新增按钮进行form表单的输入填写，当再重新打开弹框时，需要把弹框的内容重置。//this.$options.data() 获取该组件初始状态下的data。或者在实现重置按钮功能的时候，需要对某些数据进行置空的操作。//this.$data 获取当前状态下的data。通过vue2的内置方法来进行实现。
Object.assign()解决vue2中对象新增属性不是响应式问题的原理
总柴的博客
12-07 1801
将源对象和要加入属性的对象合并为一个新的对象赋值给要响应式的对象（源对象），vue会将源对象重新触发一遍Object.defineProperty依赖收集。
【JavaScript】对象
自学前端的小菜鸡的博客
10-17 287
对象（Object） - 对象是JS中的引用数据类型 - 对象是一种复合数据类型，在对象中可以保存多个不同数据类型的属性 - 使用typeof检查一个对象时，会返回object - 创建对象 - 方式一： - var obj = new Object(); - 方式二： - var obj = {}; - 向对象中添加属性 - 语法： 对象.属性名 = 属性值; 对象["属性名"] = 属性值; - 对象的属性名没有任何要求，不需要遵守标识符的规范， 但是在开发中，
Object.assign详解
热门推荐
guxin_duyin的博客
03-30 8万+
一、Object.assign是什么？ 首先了解下Object.assign()是什么。我们先看看ES6官方文档是怎么介绍的？ Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。 简单来说，就是Object.assign()是对象的静态方法，可以用来复制对象的可枚举属性到目标对象，利...
object.assign不是响应式
07-28
是的，你说得对。Object.assign() 方法用于将一个或多个源对象的属性复制到目标对象中，并返回目标对象。但是它只是执行浅拷贝，只复制对象的引用，而不会创建新的响应式对象。 在响应式编程中，通常使用的是Vue.js、React等框架，它们提供了响应式系统来实现数据的双向绑定。这些框架会跟踪对象的变化，并自动更新相关的视图。 如果你想在Vue.js或React中创建响应式的对象，你可以使用它们提供的特定方法或API来实现。例如，在Vue.js中，你可以使用Vue.observable()方法来将对象转换为响应式对象。 总结来说，Object.assign()不会创建响应式对象，如果你需要响应式的数据绑定，需要使用相应的框架或库来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值