关于vue组件的刷新问题

最新推荐文章于 2024-10-22 15:16:11 发布

Shuang_gege

最新推荐文章于 2024-10-22 15:16:11 发布

阅读量6.6k

点赞数 1

分类专栏：个人笔记文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/Shuang_gege/article/details/124847498

版权

个人笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

本文介绍了在Vue中遇到组件数据更新但页面未刷新的问题及解决方案。通过使用v-if指令或者this.$forceUpdate方法，可以强制组件重新渲染。文中提供了具体的代码示例，展示了如何利用v-if和this.$nextTick实现组件刷新，并对比了两种方法的效果。

摘要由CSDN通过智能技术生成

最近在项目中偶然碰到了一个问题，同一个页面组件，在不同的操作中进行展示，突然发现，页面的数据没有变化，意思就是我的组件没有进行数据刷新。经过各种尝试，终于解决，现将方法共享出来：

vue本来就是一个数据双向绑定的框架，而页面在初始化完成渲染过后，如果没有命令介入，有时候及时数据有变化也不会触发页面的重新渲染。当我们在调用同一个组件的时候，如果调用的数据是通过同一个字段或者属性获取而来并且这个字段或者属性没有发生变化的时候，组件自身是监控不到数据的实际变化的。这个时候就需要借助v-if了。

我们知道，当v-if的值发生变化时，组件都会被重新渲染一遍。因此，利用v-if指令的特性，可以达到强制刷新组件的目的。

<template>
    <comp v-if="update"></comp>
    <button @click="reload()">刷新test1组件</button>
</template>
<script>
import comp from '@/views/comp.vue'
export default {
    name: 'test1',
    data() {
        return {
            update: true
        }
    },
    methods: {
        reload() {
            // 移除组件
            this.update = false
            // 在组件移除后，重新渲染组件
            // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
            this.$nextTick(() => {
                this.update = true
            })
        }
    }
}
</script>

另外，网上还有另外一种强制组件内部刷新的办法，借用this.forceUpdate()强制刷新，但经过个人尝试，感觉还是没有v-if用着有效，可能是因为项目的自身问题或者自己组件的引用问题吧，不过也将代码分享出来：

<template>
<button @click="reload()">刷新当前组件</button>
</template>
<script>
export default {
    name: 'test2',
    methods: {
        reload() {
            this.$forceUpdate()
        }
    }
}
</script>