this.$set() 的用法详解(Vue响应式系统相关)

1. 什么是 this.$set()

this.$set(target, key, value) 是 Vue 2 中提供的一个方法,用于向响应式对象中动态添加属性,确保新加的属性同样是响应式的。 

2. 为什么需要它?

Vue 2 的响应式系统基于 Object.defineProperty,它只能检测到对象已有属性的变化,无法检测新增的属性。 

data() {return {user: {}}
},
methods: {addProp() {this.user.name = 'fang'; // 直接赋值不会触发视图更新}
}

 这样写,不会触发视图更新,因为 user 对象一开始没有 name 属性。

3. 正确用法:
 

this.$set(this.user, 'name', 'fang');

 4. 具体示例:

export default {data() {return {info: {}}},methods: {addInfo() {this.$set(this.info, 'age', 30);// 或者Vue.set(this.info, 'age', 30); // 组件外用Vue全局对象调用}}
}

5. Vue 3 情况

Vue 3 使用 Proxy 实现响应式,天然支持新增属性的响应式,不需要 $set

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

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

相关文章

【HarmonyOS Next之旅】DevEco Studio使用指南(三十)

目录 1 -> 部署云侧工程 2 -> 通过CloudDev面板获取云开发资源支持 3 -> 通用云开发模板 3.1 -> 适用范围 3.2 -> 效果图 4 -> 总结 1 -> 部署云侧工程 可以选择在云函数和云数据库全部开发完成后,将整个云工程资源统一部署到AGC云端。…

如何配置nginx解决前端跨域请求问题

我们以一个简单的例子模拟不同情况下产生的跨域问题以及解决方案。假设在http://127.0.0.1:8000的页面调用接口 fetch(http://127.0.0.1:8003/api/data)常看到的错误“Access to fetch at ‘http://127.0.0.1:8003/api/data’ from origin ‘http://localhost:8000’ has been…

React Hooks 指南:何时使用 useEffect ?

在 React 的函数组件中,useEffect Hook 是一个强大且不可或缺的工具。它允许我们处理副作用 (side effects)——那些在组件渲染之外发生的操作。但是,什么时候才是使用 useEffect 的正确时机呢?让我们深入探讨一下! 什么是副作用…

bat批量去掉本文件夹中的文件扩展名

本文本夹内 批量去掉本文件夹中的文件扩展名 假如你有一些文件,你想去掉他们的扩展名 有没有方便的办法呢 今天我们就分享一种办法。 下面,就来看看吧。 首先我们新建一个记事本,把名字改为,批量去掉本文件夹中的文件扩展名.txt 然…

STM32标准库-输入捕获

一、输入捕获 1.简介 IC(Input Capture)输入捕获输入 捕获模式下,当通道输入引脚出现指定电平跳变时,当前CNT的值将被锁存到CCR中,可用于测量PWM波形的频率、占空比、脉冲间隔、电平持续时间等参数 每个高级定时器和…

在linux系统上搭建git服务器(ssh协议)

1.在windows上生成RSA密钥对 ssh-keygen -t rsa -b 2048 -C"git用户名/邮箱地址" 命令执行后会在 C:\Users\${windows登录账户}\.ssh 目录下生成密钥对 其中 id_rsa 为私钥,id_rsa.pub 为公钥 2.在 linux 系统上登记公钥 vim ~/.ssh/authorized_keys…

RAG检索系统的两大核心利器——Embedding模型和Rerank模型

在RAG系统中,有两个非常重要的模型一个是Embedding模型,另一个则是Rerank模型;这两个模型在RAG中扮演着重要角色。 Embedding模型的作用是把数据向量化,通过降维的方式,使得可以通过欧式距离,余弦函数等计算…

stm32内存踩踏一例

1、问题描述 程序运行过程中,发现显示的内容乱了,如下图所示: 2、问题分析 此原因产生是由于将一个函数提前引起的,单步跟踪检查问题 运行过此函数后变量的地址改变了?被调函数能改变调用函数的变量地址&#xff1f…

Selenium的底层原理

Selenium 底层主要依赖于 WebDriver 协议(即 W3C WebDriver 规范,早期也有 JSON Wire Protocol)来实现对浏览器的远程控制,其核心架构可以分为以下几层: Selenium 客户端(Client Library) 支持多…

前端高频面试题2:浏览器/计算机网络

本专栏相关链接 前端高频面试题1:HTML/CSS 前端高频面试题2:浏览器/计算机网络 前端高频面试题3:JavaScript 1.什么是强缓存、协商缓存? 强缓存: 当浏览器请求资源时,首先检查本地缓存是否命中。如果命…

MATLAB-电偶极子所产出的电磁场仿真

% 清除工作区 clear all % 用户输入 a input(输入点电荷的位置如[1,0,1;2,0,2]表示位置在(1,0,1),(2,0,2): ); Q input(输入点电荷的电荷量,-表示电性,如[1,-1]: ); a1 input(电场线角度间隔: ); % 角度间隔 % 设置绘图范围 xmin min(a(:,1)) - 4;…

混合云数据库连接问题:本地与云实例的兼容性挑战

关键词:混合云数据库,混合云架构,数据库连接问题,网络策略,兼容性挑战,权限冲突,防火墙,VPN,ExpressRoute,Direct Connect,SQL Server,MySQL,PostgreSQL,Azure SQL Database,AWS RDS 随着企业数字化转型的深入,混合云架构正成为主流选择。它结合了本地数据中心…

pikachu靶场通关笔记16 CSRF关卡02-CSRF(POST)

目录 一、CSRF原理 二、源码分析 三、渗透实战 1、构造CSRF链接 (1)登录 (2)bp设置inception on (3)修改个人信息 (4)构造CSRF链接 2、模拟受害者登录 3、诱导受害者点击 …

CAD2025安装教程与资源下载

软件下载 软件名称:CAD2025软件语言:简体中文软件大小:2.69G系统要求:Windows10或更高,32/ 64位操作系统硬件要求:CPU2GHz ,RAM4G或更高下载链接: 链接:https://pan.qua…

SpringBoot离线应用的5种实现方式

在当今高度依赖网络的环境中,离线应用的价值日益凸显。无论是在网络不稳定的区域运行的现场系统,还是需要在断网环境下使用的企业内部应用,具备离线工作能力已成为许多应用的必备特性。 本文将介绍基于SpringBoot实现离线应用的5种不同方式。…

数据类型 -- 字符

在C中,字符型(char)用于存储单个字符,如字母、数字、符号等。字符型是最基本的数据类型之一,常用于处理文本、字符数组(字符串)等场景。 1. 基本类型 • char:标准字符类型&#x…

国标GB28181视频平台EasyGBS视频实时监控系统打造换热站全景可视化管理方案

一、方案背景​ 在城市供热体系中,换热站作为连接热源与用户的核心枢纽,其运行稳定性直接影响供热质量。面对供热规模扩大与需求升级,传统人工巡检模式暴露出效率低、响应慢、监测不足等问题。基于GB28181协议的EasyGBS视频实时监控系统&…

174页PPT家居制造业集团战略规划和运营管控规划方案

甲方集团需要制定一个清晰的集团价值定位,从“指引多元”、“塑造 能力”以及“强化协同”等方面引领甲方做大做强 集团需要通过管控模式、组织架构及职能、授权界面、关键流程、战略 实施和组织演进路径,平衡风险控制和迅速发展,保证战略落地…

python打卡第45天

tensorboard的发展历史和原理 一、发展历史 起源与 TensorFlow 一同诞生 (2015年底): TensorBoard 最初是作为 TensorFlow 开源项目(2015年11月发布)的一部分而设计和开发的。其核心目标是解决深度学习模型训练过程中的“黑盒”问题,提供直观…

CentOS 7如何编译安装升级gcc至7.5版本?

CentOS 7如何编译安装升级gcc版本? 由于配置CentOS-SCLo-scl.repo与CentOS-SCLo-scl-rh.repo后执行yum install -y devtoolset-7安装总是异常,遂决定编译安装gcc7.5 # 备份之前的yum .repo文件至 /tmp/repo_bak 目录 mkdir -p /tmp/repo_bak && cd /etc…