vue的this.$forceUpdate()和this.$set()

目录

this.$forceUpdate()

下面举个例子:

改变数组的7种方法:

this.$set()

基本用法:

 向对象添加属性

  向数组添加属性

总的来说:

this.$forceUpdate()

使用this.$forceUpdate()可以强制组件重新渲染。在Vue.js中,Vue的响应式系统会自动追踪依赖的响应式属性,并在这些属性变化时自动更新DOM。但在某些情况下,如果你手动改变了 Vue 实例上某个数据属性的值(如:通过索引直接设置数组项或使用 Vue.set/this.set之外的方式添加对象的属性),并且你希望Vue立即重新渲染视图以反映这些变化,那么你可以调用‘forceUpdate()`。

下面举个例子:

我们直接通过索引修改了数组中的第二个元素。由于Vue不能检测到直接通过索引赋值的变化,因此我们需要调用this.$forceUpdate()来强制Vue实例重新渲染,从而更新视图。

<template>  <div>  <p>Items: {{ items.join(', ') }}</p>  <button @click="handleClick">点击按钮</button>  </div>  
</template>  <script>  
export default {  data() {  return {  items: ['Apple', 'Banana', 'Cherry']  };  },  methods: {  handleClick() {  // 直接通过索引修改数组元素,Vue可能检测不到这种变化  this.items[1] = 'Orange';  // 强制Vue实例重新渲染,以更新视图  this.$forceUpdate();  }  }  
};  
</script>

上面的这种方法它绕过了Vue的响应式系统。更好的做法是使用Vue提供的方法来修改数组(如pushpopsplice等用于数组,或者Vue.set用于对象)

methods: {  handleClick() {  // 使用Vue的响应式方法来修改数组,这样可以自动触发视图更新  this.items.splice(1, 1, 'Orange'); // 替换索引为1的元素为'Orange'  }  
}

由于 forceUpdate() 会强制组件重新渲染,触发updated钩子函数,并且是全局强制刷新,性能消耗高这可能会导致性能问题,特别是在大型应用中,尽量少使用注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件。 

改变数组的7种方法:

  1. push()
    向数组的末尾添加一个或多个元素,并返回新的长度。

    this.items.push('New Item');
  2. pop()
    删除并返回数组的最后一个元素。

    let lastItem = this.items.pop();
  3. shift()
    删除并返回数组的第一个元素。

    let firstItem = this.items.shift();
  4. unshift()
    向数组的开头添加一个或多个元素,并返回新的长度。

    this.items.unshift('New First Item');
  5. splice()
    通过删除或替换现有元素或者添加新元素来改变一个数组的内容。

    // 从索引 1 开始删除 1 个元素,并插入 'Orange'
    this.items.splice(1, 1, 'Orange');
  6. sort()
    对数组的元素进行排序,并返回数组。排序顺序可以是字母或数字,并按升序或降序。需要提供一个比较函数。

    this.items.sort((a, b) => a - b); // 数字排序
    // 或者
    this.items.sort(); // 字母排序
  7. reverse()
    颠倒数组中元素的顺序,并返回该数组。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。

    this.items.reverse();

this.$set()

this.$set() 是指向性强制刷新,性能消耗低用于向响应式对象中添加一个属性,并确保这个新属性也是响应式的,并触发视图更新。这个方法主要用于解决Vue无法检测到对象属性的添加或删除的情况

基本用法:

this.$set(target, propertyName/index, value)
  • target:要修改的目标对象或数组。
  • propertyName/index:要添加或修改的属性的名称(对于对象)或索引(对于数组)。
  • value:新的属性值。
  • 注意事项:如果你试图添加一个已经存在的属性,this.$set() 将更新这个属性的值并确保它是响应式的。
 向对象添加属性
data() {  return {  userInfo: {  name: 'Juny Long',  age: 24 }  }  
},  
methods: {  addEmail() {  // 使用 this.$set() 添加新属性  this.$set(this.userInfo, 'email', 'xxx520@gmail.com');  // 现在 this.userInfo.email 是响应式的  }  
}
  向数组添加属性
data() {  return {  myArray: [1, 2, 3]  }  
},  
methods: {  updateItemAtIndex(index, newValue) {  // 使用 this.$set() 更新数组项  this.$set(this.myArray, index, newValue);  // 现在变化是响应式的  }  
}

Vue 2.x中,this.$set() 是必需的,因为Vue无法自动检测对象属性的添加或删除。但在Vue 3.x中,由于引入了Proxy,Vue可以自动检测到对象属性的添加或删除

总的来说:

$forceUpdate() 和 this.$set() 在 Vue.js 中有各自特定的用途。$forceUpdate() 强制 Vue 实例重新渲染,而 this.$set() 则用于向响应式对象中添加新的响应式属性。在使用这两个方法时,应根据具体的需求和场景来选择合适的方法。

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

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

相关文章

列举excel中调整行高列宽的五种方法

列举excel中调整行高列宽的五种方法 在Excel中调整行高列宽的方法有以下五种&#xff1a; 使用鼠标手动调整行高列宽&#xff1a;将鼠标悬停在行或列的边界上&#xff0c;光标会变成双向箭头&#xff0c;此时按住鼠标左键并拖动边界即可调整行高或列宽。 使用快捷键调整行高列…

工具(linux)

Yum 软件包管理器 介绍 yum Yum 是一个在 Red Hat 和 CentOS 等 Linux 发行版中常用的软件包管理器&#xff0c;它可以方便地进行软件包的安装、更新和删除。 安装软件包 使用 yum install 命令可以安装指定的软件包&#xff0c;例如&#xff1a; yum install package_nam…

DataLoader的使用 Pytorch

在 PyTorch 中&#xff0c;tensor.shape 返回一个包含张量各维度大小的元组。 所以&#xff0c;当你执行 print(img.shape)&#xff0c;你看到的 (3, 32, 32) 实际上是在告诉你&#xff1a; 这是一个三维张量第一维&#xff08;通道&#xff09;的大小是 3第二维&#xff08;…

“论软件测试中缺陷管理及其应用”写作框架,软考高级论文,系统架构设计师论文

原创范文 软件缺陷指的是计算机软件或程序中存在的某种破坏正常运行能力的问题、错误&#xff0c;或者隐藏的功能缺陷。缺陷的存在会导致软件产品在某种程度上不能满足用户的需要。在目前的软件开发过程中&#xff0c;缺陷是不可避免的。软件测试是发现缺陷的主要手段&#xf…

【北航主办丨本届SPIE独立出版丨已确认ISSN号】第三届智能机械与人机交互技术学术会议(IHCIT 2024,7月27)

由北京航空航天大学指导&#xff0c;北京航空航天大学自动化科学与电气工程学院主办&#xff0c;AEIC学术交流中心承办的第三届智能机械与人机交互技术学术会议&#xff08;IHCIT 2024&#xff09;将定于2024年7月27日于中国杭州召开。 大会面向基础与前沿、学科与产业&#xf…

路由表与IP数据报转发:基础小白指南

目录 1. 路由表的基本概念 2. 路由表中的默认路由 3. IP数据报的转发流程 4. 路由聚合 5. 最长前缀匹配 总结 在网络世界中&#xff0c;IP数据报的转发是如何进行的&#xff1f; 这篇文章将带你深入了解路由表的基本概念和IP数据报的转发流程。我们会用简洁明了的语言和实…

nodejs启动项目报错 Error: listen EACCES: permission denied 0.0.0.0:5000

nodejs启动项目报错 Error: listen EACCES: permission denied 0.0.0.0:5000&#xff0c;截图如下&#xff1a; 解决方法 在管理员权限下打开 CMD&#xff08;命令行&#xff09;并运行&#xff1a; net stop winnatnet start winnat 执行完成后在此通过nodejs启动项目即可…

centos系统mysql数据库差异备份与恢复

文章目录 差异备份mysql数据一、 安装 Percona XtraBackup数据库中创建一些数据三、创建全备份四、创建差异备份1. 在数据库中添加数据&#xff0c;让数据发生一些改变2. 创建第一个差异备份3. 数据库中再次添加一些数据4. 创建第二个差异备份 五、模拟数据丢失&#xff0c;删库…

【测开能力提升-Javascript】JavaScript介绍+数值类型

注释&#xff1a; 作为一名合格的测试&#xff0c;首先得会一些基础的后端语言&#xff0c;当然我选择了python&#xff0c;作为测试开发&#xff0c;对代码运行效率要求并不是很高&#xff0c;以及python强大的第三方库&#xff0c;如上一家公司&#xff0c;处理rtcm数据&…

minio 服务docker配置

用minio docker配置了一个服务&#xff0c;分享链接始终是127.0.01开始的&#xff0c; 改成docker的host的ip则提示签名不匹配&#xff0c; 好在这个文件主要是用来下载的&#xff0c;所以可以通过设置bucket的匿名访问权限来实现下载&#xff1b; 这样不需要后面的地址参数就…

UM960硬件设计,最小系统推荐设计

备注&#xff1a; l L1&#xff1a;推荐使用 0603 封装的 68 nH 射频电感l C1&#xff1a;推荐使用 100 nF 100 pF 两个电容并联l C2&#xff1a;推荐使用 100 pF 电容l C3&#xff1a;推荐使用 n 10 μF 1 100 nF 电容并联&#xff0c;总容值不小于 30 μFl R1&#xff1…

Mysql sql技巧与优化

1、解决mysql同时更新、查询问题 2、控制查询优化 hint 3、 优化 特定类型的查 优化 COUNT() 查询 使用 近似值 业务能接受近似值的话&#xff0c;使用explain拿到近似值 优化关联查询 优化子查询 4、优化group by和distinct 优化GROUP BY WITH ROLLUP 5、优化 limit分页 其他…

AI智能名片微信小程序在品牌战略与私域流量构建中的应用与深度探索

摘要&#xff1a;在数字经济时代&#xff0c;私域流量的价值日益凸显&#xff0c;成为企业和个人实现可持续增长的重要驱动力。品牌&#xff0c;作为私域流量的核心&#xff0c;其稳定性和影响力直接关系到流量的质量与转化效率。AI智能名片微信小程序&#xff0c;作为数字营销…

为什么样本方差(sample variance)的分母是 n-1?

样本均值与样本方差的定义 首先来看一下均值&#xff0c;方差&#xff0c;样本均值与样本方差的定义 总体均值的定义&#xff1a; μ 1 n ∑ i 1 n X i \mu\frac{1}{n}\sum_{i1}^{n} X_i μn1​i1∑n​Xi​ 也就是将总体中所有的样本值加总除以个数&#xff0c;也可以叫做总…

倚天屠龙记高手排名

张无忌&#xff1a;其武功配置堪称无双&#xff0c;乾坤大挪移、完全版九阳神功、太极拳剑&#xff0c;再加上后来习得的降龙十八掌&#xff0c;使他成为当之无愧的武林至尊。九阳神功的内力绵绵不绝&#xff0c;使他连拍一千招降龙十八掌也不觉疲累&#xff0c;其威力甚至超过…

vuepress搭建个人文档

vuepress搭建个人文档 文章目录 vuepress搭建个人文档前言一、VuePress了解二、vuepress-reco主题个人博客搭建三、vuepress博客部署四、vuepress后续补充 总结 vuepress搭建个人文档 所属目录&#xff1a;项目研究创建时间&#xff1a;2024/7/23作者&#xff1a;星云<Xing…

git配置代理

git配置代理 添加全局代理&#xff1a; #我在本地7890端口配置了代理&#xff0c;通过该端口转发&#xff0c;这里转发的地址和端口可根据自己的实际情况进行配置 git config --global http.proxy http://127.0.0.1:7890 git config --global https.proxy http://127.0.0.1:7…

Java毕业设计 基于SSM和Vue的跑腿系统小程序

Java毕业设计 基于SSM和Vue的跑腿系统小程序 这篇博文将介绍一个基于SSM框架和Vue开发的跑腿系统微信小程序&#xff0c;适合用于Java毕业设计。 功能介绍 跑腿员 登录 注册 忘记密码 首页 图片轮播 校友动态 校友动态详情 任务 在线接单 任务订单 我的 我的收藏 联系客…

WEB安全-SQL注入

1 需求 SQL注入分类&#xff1a; 根据参数类型&#xff1a;字符型&#xff0c;数字型、搜索型 根据提交方式&#xff1a;POST注入&#xff0c;GET注入&#xff0c;HTTP HEAD注入 根据有无回显&#xff1a;联合注入&#xff0c;报错注入&#xff0c;布尔盲注&#xff0c;延时注入…

栈和队列(C语言)

栈的定义 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一端称为栈顶&#xff0c;另一端称为栈底。栈中的数据元素遵守后进先出LIFO&#xff08;Last In First Out&#xff09;的原则。 压栈&#xff1a;…