使用vm。美元(varName,价值)。

在Change_Detection_Caveats中查看详细信息

使用v-if指令

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

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

试试这个神奇的咒语:

vm.$forceUpdate();
//or in file components
this.$forceUpdate();

不需要创建任何悬挂变量:)

更新:当我刚开始使用VueJS时，我发现了这个解决方案。然而，进一步的探索证明这种方法是一种拐杖。据我回忆，在一段时间内，我摆脱了它，只是把所有不能自动刷新的属性(大部分是嵌套的)放入计算属性中。

更多信息请访问:https://v2.vuejs.org/v2/guide/computed.html

这似乎是matthiasg关于这个问题的一个非常干净的解决方案:

你也可以使用:key=" somvariableunderyourcontrol "，当你想要完全重建组件时改变键

对于我的用例，我将Vuex getter作为道具提供给组件。Vuex会以某种方式获取数据，但反应性不会可靠地重新呈现组件。在我的例子中，将组件键设置为道具上的某个属性可以保证在getter(和属性)最终解析时进行刷新。

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

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

这对我来说很管用

2021年12月更新:

你可以通过添加:key="$route.fullPath"强制重载组件。

对于子组件:

<Child :key="$route.fullPath" />

对于router-view标签:

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

然而,:关键= " $路线。fullPath只能强制重载不同路由的组件，不能强制重载同一路由的组件。为了能够强制重载同一路由的组件，我们需要在:key="$route "中添加一个数组"value"。fullPath，并修改value。所以它变成:key="[$route。"fullPath, value]，我们需要改变value。

*我们可以将Array赋值给:key=。

<template>
  <Child 
    :key="[$route.fullPath, value]" // Can assign "Array" to ":key="
    @childReload="reload" // Call @click="$emit('childReload')" in   
  />                      // Child Component to increment the value.
</template> 

    OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR

<template>
  <router-view 
    :key="[$route.fullPath, value]" // Can assign "Array" to ":key="
    @routerViewReload="reload" // Call @click="$emit('routerViewReload')"
  />                           // in Child Component to increment the value.
</template>
    
<script>
export default {
  name: "Parent", components: { Child, },
  data() {
    return {
      value: 0,
    };
  },
  methods: {
    reload() {
      this.value++;
    }
  }
}
</script>

但是，要继续使用“$route. conf”fullPath"和"value"有时会导致一些错误，所以只有当一些事件如Click发生时，我们才使用"$route "。fullPath和value。除非发生一些像Click这样的事件，我们总是只需要使用"$route.fullPath"。

这是最终的代码:

<template>
  <Child 
    :key="state ? $route.fullPath : [$route.fullPath, value]"
    @childReload="reload" // Call @click="$emit('childReload')" in
  />                      // Child Component to increment the value.
</template>
    
    OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR OR
    
<template>
  <router-view 
    :key="state ? $route.fullPath : [$route.fullPath, value]"
    @routerViewReload="reload" // Call @click="$emit('routerViewReload')" in
  />                           // Child Component to increment the value.
</template>
        
<script>
export default {
  name: "Parent", components: { Child, },
  data() {
    return {
      state: true,
      value: 0,
    };
  },
  methods: {
    reload() {
      this.state = false;
      this.value++;
      this.$nextTick(() => this.state = true);
    }
  }
}
</script>

不幸的是，在Vue中没有正确强制重新加载组件的简单方法。这就是Vue目前的问题所在。