Vue数据更新视图未更新的几种解决方案
作者：小蹦跶儿
本文主要介绍在vue项目中,遇到数据更新但视图不更新的情况时,无法使用watch监听、无法使用this.$set方法,同时使用this.$forceUpdate()无效时,所使用的解决方案,需要的朋友可以参考下
一、问题描述
在Vue项目中，有时我们会遇到数据更新了，但是视图没有更新的情况，这是因为Vue使用的是异步更新的方式，如果数据变化时视图没有立即响应，则一般都会考虑使用以下几种解决方案：
- 方案一：使用
watch监听对象属性变化
<template>
<div>
<h3>{{userInfo.name}}</h3>
<button @click="changeUserName">点击我改变用户名</button>
</div>
</template>
<script>
export default {
data(){
return {
userInfo: {
name: '张三',
age: 16
}
}
},
watch:{
'userInfo.name': {
handler(newValue, oldValue) {
console.log('用户名变化了，新值：' + newValue + '，旧值：' + oldValue);
},
immediate: true,
deep: true
}
},
methods:{
changeUserName(){
// 假设异步请求修改用户名
const newUserName = '李四';
this.userInfo.name = newUserName;
}
}
}
</script>
- 方案二：使用
this.$set()强制更新响应式变量
// 定义数据对象：
obj: { name: "小明", age: 18, },
// 基本语法：
this.$set(需要改变的对象，"需要改变的对象属性"，"新值")
示例如下：
<template>
<div>
<h3>{{initList.message}}</h3>
<button @click="changeMessage">点击我改变message值</button>
</div>
</template>
<script>
export default {
data(){
return {
initList: {
message: 'hello'
},
}
},
methods:{
changeMessage(){
// 假设是异步调用获取到了新的message值
const newMessage='world';
this.$set(this.initList, 'message', newMessage);
}
}
}
</script>
- 方案三：使用
this.$forceUpdate(）强制性重新渲染
methods: {
// 在某些情况下需要强制重新渲染组件
forceRerender() {
// 调用 $forceUpdate()方法
this.$forceUpdate();
}
}
但是，在项目中，如果以上方案均无效，比如由于无法使用watch或this.$set()实现所需功能，或者使用后会使代码变得更复杂、冗余；同时层级太多或其他原因导致this.$forceUpdate(）也不起作用，那么还有什么方案可以解决视图不更新的问题呢？
二、解决方案
为确保视图更新，可以先将数据赋值后再清空，最后在this.$nextTick()中处理数据，并重新赋值。代码示例如下：
// 为确保视图更新，先将数据重新赋值给一个变量，然后再清空
const details = this.detailsList;
this.detailsList = [];
// 处理数据，并重新赋值
this.$nextTick(() => {
// 处理数据
const detailsList = this.formatList(details, data.playCourseChapterId);
// 重新赋值
this.detailsList = Object.assign([], detailsList);
})
这时，数据更新的同时，视图也会同步更新。
备注：
我这边的项目中，是因为层级循环太多，导致以上三种方案均不起作用。只有最后这种方案可以解决视图不更新的问题。
以上，希望对大家有帮助！
到此这篇关于Vue数据更新视图未更新的几种解决方案的文章就介绍到这了,更多相关Vue数据更新视图未更新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！