Vue刷新局部数据的方法

最新推荐文章于 2023-12-27 08:46:16 发布

艾登_皮尔斯

最新推荐文章于 2023-12-27 08:46:16 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/BubbleSort_934/article/details/122688736

当Vue项目遇到上传头像后头像未实时更新的问题，由于只是数据层面的变更，页面并未响应更新。为避免全页面刷新造成的闪烁，可以采用在`App.vue`定义的`reload`方法，并在相应组件中注入，需要时调用此方法来局部刷新数据。

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

今天在写项目时遇到上传头像后头像没有相应更新的问题，因为上传头像只是将头像上传到云端和数据库，虽然vue具有响应式更新的特性，但这种情况下vm层数据没有更新，页面也就不会响应更新了。这时需要我们手动刷新。如果使用原始方法location.reload()则会造成闪烁，于是我们可以使用以下方法。

在App.vue定义reload方法

<template>
    <div id="app">
    	<router-view v-if="isRouterAlive"></router-view>
	</div>
</template>
<script>
    export default {
        name: 'App',
        provide () {    
        //父组件通过provide来提供变量，在子组件中通过inject来注入变量                                       
            return {
                reload: this.reload                                              
            }
        },
        data() {
            return{
                isRouterAlive: true  //控制视图是否显示
            }
        },
        methods: {
            reload () {
                this.isRouterAlive = false;
                this.$nextTick(function () {
                    this.isRouterAlive = true;
                }) 
            }
        }，
    }
</script>

在需要刷新的组件注入该方法

export default {
    inject:['reload'], //注入App里的reload方法
    data () {
        return {
    	.......
        }
    },

需要刷新时使用reload()方法

this.reload();