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

          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>