vue中的$forceUpdate()、$set()

news2024/11/24 16:02:18

$forceUpdate()

迫使vue实例重新(rander)渲染虚拟dom,注意并不是重新加载组件。
结合vue的生命周期,调用 $forceupdate 后只会触发beforeupdateupdated这两个钩子函数,不会触发其他的钩子函数。它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件

页面传的数值动态改变,接口接受的参数也就动态更改,但接收的数据有时候不会及时不变,通过this.$forceUpdate()页面强制刷新来解决这个问题

首先我们知道在vue中,数据的绑定都不用我们操心,例如在data中有一个msg的变量,你修改它,那么在页面上,msg的内容就会自动发生变化。但是如果对于一个复杂的对象,例如一个对象数组,你直接去给数组上某一个元素增加属性,或者直接把数组的length变成0,vue就无法知道发生了改变。

change: function(index) {//增加性别属性
    this.list[index].sex = '男';
},
clear: function() {//清空数组
    this.list.length = 0;
}

使用$forceUpdate()

change: function(index) {
    this.list[index].sex = '男';
    this.$forceUpdate();
},
clear: function() {
    this.list.length = 0;
    this.$forceUpdate();
}

使用$set

change: function(index) {//增加性别属性
    this.$set(this.list[index],'sex','男')
},
clear: function() {//清空数组
    this.list=[];
}

注意:但是$forceUpdate()这种做法并不推荐,官方说如果你现在的场景需要用$forceupdate方法,那么99%是你的操作有问题,比如data里不显示声明对象的属性,之后添加属性时正确的做法时用 vm.$set() 方法,所以$forceupdate请慎用。

相关问题

在使用Element-Ui的select组件时,在设置了初始值后,重新选择select下拉后出现了下拉无法回显的情况,但是在进行了表单的其他项的操作后,select的选择就马上回显了
经过排查也不是下拉框绑定的值有问题
最后发现是data数据的层级过深,导致无法响应式显示
解决方法一:

this.$set(this.form, 'postIds', res.postIds)

解决方法二:

在对应的select组件增加@change事件,事件对应为$forceUpdate()即可

在这里插入图片描述

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

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

相关文章

作为一名Android车载工程师,需要具备哪些能力?

安卓开发在近几年的就业环境大家肯定都听说过,许多Android开发程序员都找不到自己满意的工作,于是纷纷另谋出路… 如今,随着Android汽车开发的兴起,很多Android开发者想转行做Android车载开发。然而,Android车载开发不…

深入理解border以及应用

深入border属性以及应用&#x1f44f;&#x1f44f; border这个属性在开发过程中很常用&#xff0c;常常用它来作为边界的。但是大家真的了解border吗&#xff1f;以及它的形状是什么样子的。 我们先来看这样一段代码&#xff1a;&#x1f44f; <!--* Author: syk 185901…

如何为三星active2手表安装自己DIY的表盘

一、步骤介绍 Step 1. 下载Galaxy watch studio&#xff1b; Step 2. 按照up主“隔壁张师傅2022”的文章进行安装。 二、安装流程简单说明&#xff1a; ① 电脑端官网下载并安装Galaxy Watch Designer或者Galaxy Watch Studio程序。 ② 关闭手表蓝牙连接&#xff0c;并打开调…

Spring中最常用的11个扩展点

前言我们一说到spring&#xff0c;可能第一个想到的是 IOC&#xff08;控制反转&#xff09; 和 AOP&#xff08;面向切面编程&#xff09;。没错&#xff0c;它们是spring的基石&#xff0c;得益于它们的优秀设计&#xff0c;使得spring能够从众多优秀框架中脱颖而出。除此之外…

【源码解析】SpringBoot的源码深入分析

SpringBoot源码分析 主流程 SpringBoot项目的组成是需要引入SpringBoot需要的依赖&#xff0c;另外启动类上添加SpringBootApplication&#xff0c;主要是标明该类是启动类和实现自动装配&#xff0c;自动装配的原理详细可见&#xff0c;SpringBoot自动装配的实现原理。那么m…

Docker基本介绍

最近需要将项目做成一个web应用并部署到多台服务器上&#xff0c;于是就简单学习了一下docker&#xff0c;做一下小小的记录。 1、简单介绍一下docker 我们经常遇到这样一个问题&#xff0c;自己写的代码在自己的电脑上运行的很流畅&#xff0c;在其他人电脑上就各种bug&…

Linux学习--常用命令vi/vim

linux平台的文本编辑器 vi/vim的使用 vi windows的记事本 vim Windows的notepad 基本上vi/vim共分为三种模式&#xff0c;命令模式(Command mode)&#xff0c;输入模式(Insert mode)&#xff0c;底线命令模式(Last line mode) vim使用流程 1、下载vim yum install vim …

【并发编程学习篇】深入理解CyclicBarrier

一、CyclicBarrier介绍 字面意思回环栅栏&#xff08;循环屏障&#xff09;&#xff0c;通过它可以实现让一组线程等待至某个状态&#xff08;屏障点&#xff09;之后再全部同时执行。叫做回环是因为当所有等待线程都被释放以后&#xff0c;CyclicBarrier可以被重用。 和Count…

动态规划:leetcode 70.爬楼梯、322.零钱兑换、279.完全平方数

leetcode 70.爬楼梯leetcode 322.零钱兑换leetcode 279.完全平方数leetcode 70.爬楼梯假设你正在爬楼梯。需要 n 阶你才能到达楼顶。每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f;注意&#xff1a;给定 n 是一个正整数。示例 1&#xff1a; 输入…

【C++】-- 智能指针

目录 智能指针意义 智能指针的使用及原理 RAII 智能指针的原理 std::auto_ptr std::auto_ptr的模拟实现 std::unique_ptr std::unique_ptr模拟实现 std::shared_ptr std::shared_ptr的模拟实现 循环引用问题 智能指针意义 #问&#xff1a;为什么需要智能指针&#…

R语言绘制SCI论文中常见的箱线散点图,并自动进行方差分析计算显著性水平

显著性标记箱线散点图 本篇笔记的内容是在R语言中利用ggplot2&#xff0c;ggsignif&#xff0c;ggsci&#xff0c;ggpubr等包制作箱线散点图&#xff0c;并计算指定变量之间的显著性水平&#xff0c;对不同分组进行特异性标记&#xff0c;最终效果如下。 加载R包 library(ggplo…

SQL注入漏洞利用(上)

SQL注入漏洞SQL注入漏洞SQL注入原理SQL注入带来的危害SQL注入分类数字型注入实操字符型注入实操类型检测and测试绕过密码&#xff1a;or 11 --搜索型注入实操SQL注入漏洞 攻击者利用Web应用程序对用户输入验证上的疏忽&#xff0c;在输入的数据中包含对某些数据库系统有特殊意…

离散数学笔记_第一章:逻辑和证明(2 )

1.2 命题逻辑的应用1.2.1 语句翻译 1.2.2 系统规范说明 1.2.3 布尔搜索 1.2.4 逻辑谜题泥巴孩子谜题骑士和流氓&#xff08;考研逻辑题&#xff09;1.1.2.5 逻辑电路1.2.1 语句翻译 &#x1f433;为啥要翻译语句&#xff1f; ➡因语言常常有二义性&#xff08;有歧义&#x…

Window.location 详细介绍

如果你需要获取网站的 URL 信息&#xff0c;那么 window.location 对象就是为你准备的。使用它提供的属性来获取当前页面地址的信息&#xff0c;或使用其方法进行某些页面的重定向或刷新。 https://www.samanthaming.com/tidbits/?filterJS#2 window.location.origin → htt…

Dbeaver连接Hive数据库操作指导

背景&#xff1a;由于工作需要&#xff0c;当前分析研究的数据基于Hadoop的Hive数据库中&#xff0c;且Hadoop服务端无权限进行操作且使用安全模式&#xff0c;在研究了Dbeaver、Squirrel和Hue三种连接Hive的工具&#xff0c;在无法绕开useKey认证的情况下&#xff0c;只能使用…

基于vscode开发vue项目的详细步骤教程

1、Vue下载安装步骤的详细教程(亲测有效) 1_水w的博客-CSDN博客 2、Vue下载安装步骤的详细教程(亲测有效) 2 安装与创建默认项目_水w的博客-CSDN博客 目录 五、vscode集成npm开发vue项目 1、vscode安装所需要的插件&#xff1a; 2、搭建一个vue小页面(入门vue) 3、大致理解…

近期常见组件漏洞更新:

&#xff08;1&#xff09;mysql 5.7 在2023年1月17日&#xff0c;发布了到5.7.41版本 mysql 8.0 在2023年1月17日&#xff0c;发布了到8.0.32版本 MySQL :: Download MySQL Community Serverhttps://dev.mysql.com/downloads/mysql/ &#xff08;2&#xff09;Tomcat8在202…

react react-redux数据共享学习记录

react react-redux数据共享1.目的2.数据共享版本2.1Person模块的添加2.1.1 Containers下的Person2.1.2 actions下的person.js2.1.3 reducers下的person.js2.2 store.js的改写&#xff01;2.3 组件中取出状态的时候&#xff0c;记得“取到位”3.纯函数1.目的 前面的react和reac…

精确光度预测计算工具:AGi32 Crack

什么是AGi32&#xff1f; AGi32首先是一种用于精确光度预测的计算工具&#xff1a;一种技术工具&#xff0c;可以计算任何情况下的照度&#xff0c;协助灯具放置和瞄准&#xff0c;并验证是否符合任意数量的照明标准。 然而&#xff0c;要增强对光度学结果的理解&#xff0c;还…

创建SpringBoot注意事项

作为一个java小白&#xff0c;你是否因为创建SpringBoot项目那些莫名其妙的错误搞得头皮发麻。不要慌张&#xff0c;这篇文章能帮你解决90%的问题【持续更新…】 本文结合创建SpringBoot项目的完整过程来讲 在idea中新建项目 虽然SpringBoot项目是由maven内核组成的&#xff0…