Vue|数据更新,视图未更新的几种解决方案

前言:

本文主要介绍在vue项目中,遇到数据更新但视图不更新的情况时,无法使用watch监听、无法使用this.$set方法,同时使用this.$forceUpdate()无效时,所使用的解决方案。

一、问题描述

在Vue项目中,有时我们会遇到数据更新了,但是视图没有更新的情况,这是因为Vue使用的是异步更新的方式,如果数据变化时视图没有立即响应,则一般都会考虑使用以下几种解决方案:

  1. 方案一:使用watch监听对象属性变化
xml 复制代码
<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>
  1. 方案二:使用this.$set()强制更新响应式变量
js 复制代码
// 定义数据对象:
obj: { name: "小明", age: 18, },       

// 基本语法:
this.$set(需要改变的对象,"需要改变的对象属性","新值")

示例如下:

xml 复制代码
<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>
  1. 方案三:使用this.$forceUpdate()强制性重新渲染
js 复制代码
methods: {
    // 在某些情况下需要强制重新渲染组件
    forceRerender() {
        // 调用 $forceUpdate()方法
        this.$forceUpdate();
    }
}

但是,在项目中,如果以上方案均无效,比如由于无法使用watchthis.$set()实现所需功能,或者使用后会使代码变得更复杂、冗余;同时层级太多或其他原因导致this.$forceUpdate()也不起作用,那么还有什么方案可以解决视图不更新的问题呢?

二、解决方案

为确保视图更新,可以先将数据赋值后再清空,最后在this.$nextTick()中处理数据,并重新赋值。代码示例如下:

js 复制代码
// 为确保视图更新,先将数据重新赋值给一个变量,然后再清空
const details = this.detailsList;
this.detailsList = [];

// 处理数据,并重新赋值
this.$nextTick(() => {
    // 处理数据
    const detailsList = this.formatList(details, data.playCourseChapterId);
    // 重新赋值
    this.detailsList = Object.assign([], detailsList);
})

这时,数据更新的同时,视图也会同步更新。

备注:

我这边的项目中,是因为层级循环太多,导致以上三种方案均不起作用。只有最后这种方案可以解决视图不更新的问题。

以上,希望对大家有帮助!

相关推荐
汤姆Tom5 分钟前
JavaScript reduce()函数详解
javascript
小飞悟6 分钟前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子13 分钟前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
蓝翔认证10级掘手40 分钟前
🤯 家人们谁懂啊!我的摸鱼脚本它...它成精了!🚀
javascript
炒毛豆1 小时前
vue3.4中的v-model的用法~
前端·vue.js
前端康师傅1 小时前
JavaScript 中你不知道的按位运算
前端·javascript
tianchang1 小时前
策略模式(Strategy Pattern)深入解析与实战应用
前端·javascript·代码规范
best6661 小时前
JavaScript的Math内置对象,到底是何方神圣?
javascript
掘金安东尼2 小时前
技术解析:高级 Excel 财务报表解析器的架构与实现
前端·javascript·面试
每天开心2 小时前
一文教你掌握事件机制
前端·javascript·ai编程