vue基础知识九:动态给vue的data添加一个新的属性时会发生什么?怎样解决?

在这里插入图片描述
一、直接添加属性的问题

我们从一个例子开始

定义一个p标签,通过v-for指令进行遍历

然后给botton标签绑定点击事件,我们预期点击按钮时,数据新增一个属性,界面也 新增一行

<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是用过Object.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属性或者设置foo值的时候都能够触发setter与getter

obj.foo   
obj.foo = 'new'

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

obj.bar  = '新属性'

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

三、解决方案

Vue 不允许在已经创建的实例上动态添加新的响应式属性

若想实现数据与视图同步更新,可采取下面三种解决方案:

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

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% 的情况,是你在某个地方做错了事

$forceUpdate迫使Vue 实例重新渲染

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

小结

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

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

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

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

相关文章

python基于GDAL的多线程高速批量重采样、对齐栅格、对齐行列数,并无损压缩

在自己写代码处理遥感数据进行波段计算&#xff0c;或者基于遥感等空间数据进行机器学习、深度学习时&#xff0c;一般都需要各图层行列数一致。在QGIS中有“对齐栅格”工具可以完成该任务&#xff0c;但是QGIS中没有提供批量操作的接口&#xff0c;在数据比较多时&#xff0c;…

useTransition 和 useDeferredValue 初体验

useTransition 是一个帮助你在不阻塞 UI 的情况下更新状态的 React Hook。 通过 transition&#xff0c;UI 仍将在重新渲染过程中保持响应性。例如用户点击一个选项卡&#xff0c;但改变了主意并点击另一个选项卡&#xff0c;他们可以在不等待第一个重新渲染完成的情况下完成操…

eslint写jsx报错

eslint写jsx报错 ChatGPT提示 在写JSX时&#xff0c;ESLint可能会报出一些语法错误&#xff0c;这些错误通常是由于ESLint默认配置中不支持JSX语法导致的。为了解决这些错误&#xff0c;我们需要在ESLint配置文件中启用对JSX语法的支持。 首先&#xff0c;需要安装eslint-pl…

Python 集合

一、集合概念 集合&#xff08;set&#xff09;是一个无序的不重复元素序列。 二、集合的创建 可以使用大括号{}或者set方法创建集合&#xff0c;但是创建一个空集合必须使用set而不能使用空{},因为在python中空{}用于创建空字典。 1、set函数 set()函数创建一个无序不重复元…

时序分解 | MATLAB实现基于EWT经验小波变换的信号分解分量可视化

时序分解 | MATLAB实现基于EWT经验小波变换的信号分解分量可视化 目录 时序分解 | MATLAB实现基于EWT经验小波变换的信号分解分量可视化效果一览基本介绍程序设计参考资料 效果一览 基本介绍 EWT经验小波变换 包含频谱相关系数 可直接运行 Matlab代码 1.可自由设置分量个数&…

OPENCV--调用GrabCut实现图像分割

# -*- coding:utf-8 -*- """ 作者:794919561 日期:2023/9/6 """ import cv2 import numpy as npclass Application:rect = (0,0,0,0)flag_rect = FalsestartX

SpringBoot整合Easy-ES操作演示文档

文章目录 SpringBoot整合Easy-ES操作演示文档1 概述及特性1.1 官网1.2 主要特性 2 整合配置2.1 导入POM2.2 Yaml配置2.3 EsMapperScan 注解扫描2.4 配置Entity2.5 配置Mapper 3 基础操作3.1 批量保存3.2 数据更新3.3 数据删除3.4 组合查询3.5 高亮查询3.6 统计查询 4 整合异常4…

106. 从中序与后序遍历序列构造二叉树

题目链接&#xff1a; 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 思想&#xff1a; 来看一下一共分几步&#xff1a; 第一步&#xff1a;如果数组大小为零的话&#xff0c;说明是空节点了。 第二步&#xff1a;如果不为空&#xff0c;那么取…

联发科3纳米芯片预计2024年量产,此前称仍未获批给华为供货

9月7日&#xff0c;联发科与台积电共同宣布&#xff0c;联发科首款采用台积电3纳米制程生产的天玑旗舰芯片开发进度顺利&#xff0c;已成功流片&#xff0c;预计将在2024年量产&#xff0c;并将于下半年正式上市。这款旗舰芯片并非今年上市的天玑9300。 据联发科总经理陈冠州介…

prize_p1

文章目录 解题过程代码审计思路问题解决数组绕过preg_match__destruct的触发修改phar文件以及签名phar://支持的后缀 题解方法一&#xff08;数组绕过&#xff09;方法二&#xff08;gzip绕过&#xff09; 解题过程 源代码 <META http-equiv"Content-Type" conte…

OpenLDAP | ubuntu 安装配置和汉化 phpldapadmin

仅做汉化配置记录&#xff0c;后续完善openLDAP Samba。 sudo apt-get install phpldapadmin -y sudo vi /etc/phpldapadmin/config.php $servers->setValue(server,host,127.0.0.1); //修改为你ldap的服务器地址 $servers->setValue(server,base,array(dcexample,dc…

Ubuntu中设置代理的方式

由于公司的局域网环境&#xff0c;只提供以代理服务器的方式上网&#xff0c;因此有必要记录一下设置代理的方式&#xff0c;方便以后使用。 系统设置代理&#xff1a; System Settings -> Network -> Network proxy Method选择Manual&#xff0c;然后设置 HTTP Proxy…

AI文本创作在百度App发文的实践

作者 | 内容生态端团队 导读 大语言模型&#xff08;LLM&#xff09;指包含数百亿&#xff08;或更多&#xff09;参数的语言模型&#xff0c;这些模型通常在大规模数据集上进行训练&#xff0c;以提高其性能和泛化能力。在内容创作工具接入文心一言AI能力后&#xff0c;可以为…

论文复现--lightweight-human-pose-estimation-3d-demo.pytorch(单视角多人3D实时动作捕捉DEMO)

分类&#xff1a;动作捕捉 github地址&#xff1a;https://github.com/Daniil-Osokin/lightweight-human-pose-estimation-3d-demo.pytorch 所需环境&#xff1a; Windows10&#xff0c;conda 4.13.0&#xff1b; 目录 conda环境配置安装Pytorch全家桶安装TensorRT&#xff08;…

C++设计模式_05_Observer 观察者模式

接上篇&#xff0c;本篇将会介绍C设计模式中的Observer 观察者模式&#xff0c;和前2篇模板方法Template Method及Strategy 策略模式一样&#xff0c;仍属于“组件协作”模式。Observer 在某些领域也叫做 Event 。 文章目录 1. 动机&#xff08; Motivation&#xff09;2. 代码…

spring boot 2.7 -> 3.0升级指南

spring boot提供一个版本迁移指南 2.7 -> 3.0

红帽 RHEL 源码限制成契机,AlmaLinux 获捐更可“做自己”

红帽在两个月前发布公告声称&#xff0c;将限制对 Red Hat Enterprise Linux (RHEL) 源代码的访问&#xff0c;早前曾报道&#xff0c;此举导致 AlmaLinux 、Rocky Linux 等 Linux 发行版未来发展严重受阻。 对于这一决策&#xff0c;AlmaLinux OS 基金会主席 Benny Vasquez 此…

few shot目标检测survey paper笔记(整体概念)

paper: Few-Shot Object Detection: A Comprehensive Survey (CVPR2021) 深度学习提高了目标检测的精度&#xff0c;但是它需要大量的训练数据。 对于训练数据集中没有见过的目标&#xff0c;是检测不了的&#xff0c;所以就限制了在实际中的应用。 如果想让模型去识别新的目标…

element-table 行的拖拽更改顺序(无需下载sortableJs

样例展示&#xff1a;vueelement 通过阅读element文档我们发现element并不提供拖拽相关的api 本博客通过element提供的行类名 注册函数 实现行与行的拖拽 1.设置el-table 的行样式类名 这里是用的是 function <el-table:data"outputData":row-class-name&qu…

Vue知识系列(3)每天10个小知识点

目录 系列文章目录Vue知识系列&#xff08;1&#xff09;每天10个小知识点Vue知识系列&#xff08;2&#xff09;每天10个小知识点 知识点**21. Vue不同生命周期**的概念、作用、原理、特性、优点、缺点、区别、使用场景**22. Vue 子组件和父组件执行顺序****23. created 和 mo…