动态给vue的data添加新属性页面不更新的原因分析以及解决方法

直接添加属性的问题

我们从一个例子触发

定义一个p标签,通过v-for指令进行遍历,然后通过绑定事件,触发事件的时候,将动态添加哟个属性。

预期结果:动态增加的属性也被遍历显示在页面上

<p v-for="(value,key) in item" :key="key">{{ value }}
</p>
<button @click="addProperty">动态添加新属性</button>

实力化一个vue实力,定义data属性喝methods方法

const app = new Vue({el:"#app",data:()=>{item:{oldProperty:"旧属性"}},methods:{addProperty(){this.items.newProperty = "新属性"  // 为items添加新属性console.log(this.items)  // 输出带有newProperty的items}}
})

点击按钮,发现结果不及预期,数据虽然也更新了(console打印出了新属性),但是页面并没有更新。

原因分析

我们都知道,在vue2中,是使用Obejct.defineProperty实现数据响应式的

const obj = {}
Object.defineProperty(obj, 'foo', {get() {console.log(`get foo:${val}`);return val},set(newVal) {if (newVal !== val) {console.log(`set foo:${newVal}`);val = newVal}}})
}

当我们访问或者设置对象已经存在的属性,例如上面的foo,都能够触发setter与getter

obj.foo   
obj.foo = 'new'

但是我们为obj添加新的属性的时候,却无法触发事件的拦截

obj.bar  = '新属性'

原因是一开始obj的foo属性被设置成了响应式数据,而bar是最后新增的属性,并没有通过Object.defineProperty设置成响应式数据

解决方案

vue不允许在已经创建的实例上动态添加新的响应式属性,若想实现数据喝视图同步更新,可采取下面三种解决方案:

  • Vue.$set()
  • $forceUpdated()
  • Object.assign()

Vue.set

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

参数

  • {Object | Array} target
  • {string | number} propertyName/index
  • {any} value

返回值:设置的值

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

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

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

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}}})
}

Object.assign()

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

this.someObject = Object.assign({},this.someObject,{newProperty1:1,newProperty2:2 ...})

$forceUpdate

如果你发现你自己需要在Vue中做一次强制更新,99.9%的情况,是你在某个地方做出了事(狗头.jpg)

$forceUpdate迫使Vue 实例重新渲染

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

小结

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/707908.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android 15 第一个开发者预览版-Android15的新变化

版本说明 发布日期2024 年 2 月 16 日buildAP31.240119.016模拟器支持x86&#xff08;64 位&#xff09;、ARM (v8-A)安全补丁级别2024 年 2 月Google Play 服务2015 年 2 月 24 日API diffAPI 34 → V DP1 Android 15 将继续致力于构建一个平台&#xff0c;在帮助提高效率的…

后端程序员入门react笔记(六)- 讲透Promise与Fetch

js声明变量的三种方式 我们通常使用 var let 和const来声明js的变量&#xff0c;但是这三者有什么区别呢&#xff1f; var的变量可以是全局的或者函数作用域&#xff0c;而let和const只能是块级作用域var和let可以重新赋值&#xff0c;而const是不允许重新赋值的&#xff0c;…

【王道数据结构】【chapter7查找】【P285t5】

线性表中各节点的检索概率不等时&#xff0c;可用如下策略提高顺序检索的效率&#xff1b;若找到指定的结点&#xff0c;则将该结点和其前驱结点&#xff08;若存在&#xff09;交换&#xff0c;使得经常被访问的结点尽量位于表的前端。试设计在顺序结构和链式结构的线性表盘上…

python中集合(Set)和列表(List)性能比较

文章目录 引言1. Set和List2. 性能对比3. 总结 引言 在当今的软件开发过程中&#xff0c;Python 已经成为了一种极为流行的编程语言&#xff0c;得益于其简洁的语法和强大的库支持。在 Python 中&#xff0c;列表&#xff08;List&#xff09;和集合&#xff08;Set&#xff0…

敏捷开发中如何写好用户故事?

什么是用户故事&#xff1f; 用户故事&#xff08;user story&#xff09;是一个用来确认用户和用户需求的简短描述&#xff0c;作为什么用户&#xff0c;希望如何&#xff0c;这样做的目的或者价值何在。用户故事在软件研发中又被描述为需求。用户故事通常的格式为&#xff1…

【一】【计算机网络】win基本命令

检查自己的信息 以太网IPv4 地址就是本地计算机。 以太网适配器 VMware Network Adapter VMnet1的IPv4 地址不是本地计算机。局域网内其他的计算机。 C:\Users\205>ipconfigWindows IP 配置以太网适配器 以太网:连接特定的 DNS 后缀 . . . . . . . :本地链接 IPv6 地址. .…

【Android】切换系统全局语言设置

前两种为应用内部处理&#xff0c;第三种为发送广播由系统服务进行处理 使用反射 这种会直接将安卓设置内的语言列表清空&#xff0c;然后将选择的语言设置为系统语言 该方法存在问题&#xff0c;在首次开机后设置会导致国外应用进不去(只对于here地图个别版本) /*** 设置语言…

STL容器之list

​ 1.封装除了对数据的保护、更好地管理数据之外&#xff0c;还有实现了对上层的统一&#xff1b; ​ 2.类模板参数的不同&#xff0c;一方面是为了实例化出来不同的类&#xff0c;另一方面是为了实现类的成员函数的不同&#xff1b; 一、认识list ​ 1.list是一种带头双向循…

隐藏 IP 地址调用外部接口:探索与实践

目录 探索隐藏自己的 IP 调用别人的接口1. 使用代理服务器代码示例实际场景 2. 使用 VPN实际场景 3. 使用 Tor 匿名网络实际场景 结语 引言&#xff1a; 在网络开发中&#xff0c;有时我们需要调用外部接口来获取数据或执行某些操作。然而&#xff0c;有些情况下&#xff0c;我…

java高并发场景面试题,干货来袭

为什么阿里巴巴的持久层抛弃hibernate&#xff0c;采用MyBatis框架&#xff1f; 原因大概有以下4点&#xff1a; 尤其是需要处理大量数据或者大并发情况的网站服务&#xff0c;这也阿里选择MyBatis的原因。 MyBatis整体架构 不多讲&#xff0c;先看目录图 MyBatis源码笔记文档…

捕获在野SMBGhost本地提权攻击样本

前言 从Windows10 v1903/Windows Server v1903开始&#xff0c;微软在协议SMB3.1.1中开启了对数据压缩传输的支持&#xff0c;但是由于SMB没有正确处理压缩的数据包&#xff0c;在客户端/服务端解压数据的时候&#xff0c;没有对COMPRESSIN_TRANSFORM_HEADE结构进行安全校验&a…

【mysql 数据库事务】开启事务操作数据库,写入失败后,不回滚,会有问题么? 这里隐藏着大坑,复试,面试时可以镇住面试老师!!!!

建表字段: CREATE TABLE user (id INT(11) NOT NULL AUTO_INCREMENT,nickname VARCHAR(32) NOT NULL COLLATE utf8mb4_general_ci,email VARCHAR(32) NOT NULL COLLATE utf8mb4_general_ci,status SMALLINT(6) UNSIGNED NULL DEFAULT NULL,password VARCHAR(256) NULL DEFAULT…

QT两个类之间使用信号槽

在做一些东西的时候&#xff0c;习惯性的引入头文件并且调用&#xff0c;因此出现了很多bug,qt的信号槽机制便可以有效的避免一些问题。 A类 #ifndef A_H #define A_H#include <QObject> #include <QDebug> class A : public QObject {Q_OBJECT public:explicit A…

Netty入门指南:从零开始的异步网络通信

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 Netty入门指南&#xff1a;从零开始的异步网络通信 前言Netty简介由来&#xff1a;发展历程&#xff1a;异步、事件驱动的编程模型&#xff1a; 核心组件解析通信协议高性能特性异步编程范式性能优化与…

C++ stack queue详解以及模拟实现

目录 1.stack的使用 1.1stack的定义 1.2stack的使用 1.3stack的构造 2.stack底层模拟实现 3.queue的使用 3.1queue的定义 3.2queue的使用 4.queue底层模拟实现 1.stack的使用 1.1stack的定义 1. stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环…

vue3-(jeecgBoot) 本地图片展示,部署后加载失败解决

开始使用的方法如下&#xff1a; <img class"alarm" :src"/assets/images/icon-alarm-default.png"/>结果是本地运行测试可以正常显示&#xff0c;部署发布后就不显示了 解决方案**&#xff1a; 图片地址配置为变量 import defImg from ‘//assets…

关于 cocos creator 如何打包抖音字节小游戏步骤一

1、cocos creator打开引擎&#xff0c;在顶部选择构建之后&#xff0c;在选择点击构建(ps:具体看项目组的大小&#xff0c;如果是一个简单的不多资源一般不到一分钟&#xff0c;如果项目很大&#xff0c;就至少半个小时以上)&#xff0c;之后 成功构建之后如下所示&#xff1a;…

修改Qt生成iOS应用的原生底层,编译QtBase下的ios子模块

1.下载Qt源码 2.找到ios.pro子工程 3.使用QtCreaor12打开ios.pro工程 4.出现工程下只有一个.pro文件解决 复制修改好的toolchain.prf文件进行替换. 修改方法:

分布式调度平台XXL-JOB

相对来说&#xff0c;xxl-job中心式的调度平台轻量级&#xff0c;开箱即用&#xff0c;操作简易&#xff0c;上手快&#xff0c;与SpringBoot有非常好的集成&#xff0c;而且监控界面就集成在调度中心&#xff0c;界面又简洁&#xff0c;对于企业维护起来成本不高&#xff0c;还…

论文阅读-CheckFreq:频繁、精细的DNN检查点操作。

论文名称&#xff1a;CheckFreq: Frequent, Fine-Grained DNN Checkpointing. 摘要 训练深度神经网络(DNNs)是一项资源密集且耗时的任务。在训练过程中&#xff0c;模型在GPU上进行计算&#xff0c;重复地学习权重&#xff0c;持续多个epoch。学习到的权重存在GPU内存中&…