使用v-if指令

<div v-if="trulyvalue">
  <component-here />
</div>

因此，简单地将truyvalue的值从false更改为true将导致div之间的组件重新渲染

有两种方法，

你可以在你的方法处理程序中使用$forceUpdate()

<您的组件@click = " reRender ()" > < /组件>

<script>
export default {
   methods: {
     reRender(){
        this.$forceUpdate()
     }
   }
}
</script>

你可以给你的组件一个:key属性，并在想要渲染时增加

<your-component:key="index" @click="reRender()" > < /组件>

<script>
export default {
   data() {
     return {
        index: 1
     }
   },
   methods: {
     reRender(){
        this.index++
     }
   }
}
</script>

如果你的URL在加载组件时也发生了变化，你可以在:key属性中使用它。如果你直接在router-view标签上使用它，效果会特别好。这与添加的键的benedit是一个实际绑定到页面内容的值，而不仅仅是一些随机数。

<router-view :key="this.$route.path"></router-view>

<my-component :key="uniqueKey" />

同时使用。$set(obj，'obj_key'，value) 并且每次更新object (obj)值时更新uniqueKey 对于每一次更新this. uniquekey++

这对我来说很管用

确定. .可以简单地使用key属性在任何时候强制重新呈现(重新创建)。

<mycomponent :key="somevalueunderyourcontrol"></mycomponent>

有关示例，请参见https://jsfiddle.net/mgoetzke/epqy1xgf/

这里也有讨论:https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875

如果您正在使用路由器视图或Vue路由器，您可以直接使用关键功能

<router-view :key="$route.path"></router-view>

这将告诉路由器视图在每次路径改变时重新渲染页面。