vue数据更新了，但页面没有更新，解决办法如下：（Vue 实现组件的强制刷新）

本文链接：https://blog.youkuaiyun.com/bigdargon/article/details/127208702

当Vue数据更新但页面未响应变化时，可以通过`this.$set`更新数组或对象，或者利用Vue的强制刷新方法如`v-if`、`this.$forceUpdate()`和`:key`属性来实现组件的重新渲染。详细介绍了这三种方法的使用场景和操作步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种-- - this.$set(原数组, 索引值, 需要赋的值)

vue中$set的用法
 
$set用来更新数组或对象
 
$set接收3个参数：参数1:参数是需要更新的数组或对象，
                参数2:是数组的下标或者对象的属性名，
                参数3:是更新的内容

$set用于更新数组

let arr =["周一","周二","周三","周四","周五","周六"];
//第一个参数是数组，第二个参数是下标索引，第三个参数是新的内容
this.$set(arr,5,"周日"];
//结果
console.log(arr);//arr=["周一","周二","周三","周四","周五","周日"]

$set用于更新对象：

//对象的属性sex的值更新为"女"
let obj={name:"小明",age:18,sex:"男"};
 
//第一个参数是对象，第二个参数是更新的属性名称，第三个参数是更新的内容
this.$set(obj,"sex","女");
 
//结果
console.log(obj)//obj={name:"小明",age:18,sex:"女"}

第二种：Vue 实现组件的强制刷新

方法一：v-if

实现原理：通过v-if 来控制组件的显示/隐藏。

如果想在子组件某个操作完成后就卸载该组件，那么可以在子组件中调用isHidden 实现。比如说子组件是confirm 框， 当用户点击“确定/取消”后想卸载该组件，那就在确定/取消事件里调用添加代码：
this.$parent.isHidde();

方法二：this.$forceUpdate()

上面是子组件的强制刷新方法。但有时候我们想直接对当前组件进行强制刷新操作，那该怎么办呢？
我们可以调用this.$forceUpdate()可以强制当前组件刷新。

方法三：:key=“value”

场景：父组件下的子组件需要特定条件下重新渲染(组件生命周期或者说是生命周期下的副作用重新执行)，使用属性key来实现

该方法和方法一非常相似，都是通过改变一个变量来实现组件的强制刷新。但要注意的是，只要当key的值改变，组件就会自动刷新，所以key的值可以是任何类型。而v-if 的值严格来说只能是true/false。