Vue数据更新视图不更新的几种解决方案小结

下面就为大家详细讲解Vue数据更新视图不更新的几种解决方案小结。

一、问题描述

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

二、解决方案

方案一：使用this.$set强制更新响应式变量

Vue使用Object.definedProperty来劫持数据，以实现数据的响应式，这意味着当我们使用Vue实现了一个数据模型后，只有这个模型中的属性才会是响应式的。因此，当我们改变模型中的属性时，Vue会触发视图更新，但是在使用原生JavaScript操作对象时，没有这个机制，Vue并不会知道它的变化。所以，当我们使用Vue实现了一个对象，想要改变其中的属性时，需要使用Vue提供的this.$set方法来实现媒介，以管理变量的响应式模式。

示例代码如下：

<template>
    <div>
        <h3>{{message}}</h3>
        <button @click="changeMessage">点击我改变message值</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            message: 'hello'
        }
    },
    methods:{
        changeMessage(){
            // 假设是异步调用获取到了新的message值
            let newMessage='world';
            this.$set(this,'message',newMessage);
        }
    }
}
</script>

方案二：使用watch监听对象属性变化

在Vue中可以使用watch来监听数据变化。watch是一个Vue实例的属性，用于监听变量（data），一旦变量发生变化，watch函数就会处理变化后的值。因此当我们使用原生JavaScript操作对象时，可以使用watch来监听对象的属性变化，并在变化后执行逻辑。

示例代码如下：

<template>
    <div>
        <h3>{{userInfo.name}}</h3>
        <button @click="changeUserName">点击我改变用户名</button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            userInfo: {
                name: '张三',
                age: 18
            }
        }
    },
    watch:{
        'userInfo.name': function(newValue, oldValue) {
            console.log('用户名变化了，新值：' + newValue + '，旧值：' + oldValue);
        }
    },
    methods:{
        changeUserName(){
            // 假设异步请求修改用户名
            let newUserName = '李四';
            this.userInfo.name = newUserName;
        }
    }
}
</script>

方案三：使用key值强制更新组件

在Vue中，每个组件都有一个属性key，当组件需要更新时，Vue通过比较oldVnode和vnode是否相同来判断需不需要重新渲染组件。当我们的响应式变量没有被更新时，可以通过给组件添加一个key值来强制更新组件。

示例代码如下：

<template>
    <div>
        <h3>{{message}}</h3>
        <button @click="changeMessage">点击我改变message值</button>
        <child-component :key="key" :message="message"></child-component>
    </div>
</template>

<script>
import ChildComponent from 'childComponent.vue';
export default {
    data(){
        return {
            message: 'hello',
            key: 0
        }
    },
    components:{
        ChildComponent
    },
    methods:{
        changeMessage(){
            // 假设是异步调用获取到了新的message值
            let newMessage='world';
            this.message=newMessage;
            this.key++;
        }
    }
}
</script>

三、总结

当我们在使用Vue过程中遇到数据更新而视图没有更新的情况时，可以尝试使用上述三种方案解决。其中第一种方案主要是针对变量直接赋值时的问题，第二种方案主要是针对对象属性的问题，第三种方案主要是针对组件的问题。