vue响应式数据更新,解决方案

本文探讨了Vue中常见的DOM未更新问题,解释了Vue响应式的局限性,并提供了两种解决方案:重新赋值空对象与使用Vue.$set方法。

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

问题: 刚学习vue的人可能会遇到这样一种情况,那就是当我们把属性在data中定义,接口异步请求到数据,并且把值赋值到我们在data中定义的值上,但是dom却没有更新,这时候我们可能就在想,为什么了?是不是vue有问题啊。

<div id="app">
        <h2>{{data.value}}</h2>
</div>

 data: {
     data: {}
 },
 created() {
	this.$axios.get().then(res => {
		this.data.value = res;
	})
}

vue的响应式是不完美的,它仅仅只能观测到object数据的取值及设置值,当我们向object数据里添加一对新的key/value或删除一对已有的key/value时,它是无法观测到的,导致当我们对object数据添加或删除值时,无法通知依赖,无法驱动视图进行响应式更新。
解决方法
1、在请求接口得到数据后,把data值再度赋值为空。

<div id="app">
        <h2>{{data.value}}</h2>
</div>

 data: {
     data: {}
 },
 created() {
	this.$axios.get().then(res => {
		this.data = {};
		this.data.value = res;
	})
}

原理:因为vue的dom更新是异步的,即当setter操作发生后,指令并不会立马更新,指令的更新操作会有一个延迟,当指令更新真正执行的时候,此时.value属性已经赋值,所以指令更新模板时得到的是新值。
2、Vue.$set
通过set方法可以将添加一个具备响应式特性的属性,并且其子属性也具备响应式特性,但是必须是新属性才可以,如果是本身已有的属性该方法是不起作用的。

<div id="app">
        <h2>{{data.value}}</h2>
</div>

 data: {
     data: {}
 },
 created() {
	this.$axios.get().then(res => {
		this.$set('data.value', res);
	})
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值