我找到了一个办法。这有点俗气，但很管用。

vm.$set("x",0);
vm.$delete("x");

其中vm是视图模型对象，x是一个不存在的变量。

Vue.js会在控制台日志中抱怨这个问题，但它确实会触发所有数据的刷新。使用版本1.0.26进行测试。

试试这个神奇的咒语:

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

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

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

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

使用v-if指令

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

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

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

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

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目前的问题所在。

这对我来说很有效。

created() {
    EventBus.$on('refresh-stores-list', () => {
        this.$forceUpdate();
    });
},

另一个组件触发refresh-stores-list事件将导致当前组件重新呈现