How to force reload/ re - render in Vue. Js

Vue.js 通常是响应式的，当对应的数据变化时，Vue 会自动更新 DOM。然而，在某些情况下，你可能需要强制 Vue 组件重新渲染，即便其数据没有发生变化。以下是几种可以实现强制重新渲染的方法：

1. 使用 key 属性

在 Vue 中，你可以通过改变一个组件的 key 属性来强制其重新渲染。key 属性是 Vue 的一个特殊属性，用于跟踪节点的身份，这可以用于强制重新渲染组件。

vue
<template>
  <your-component :key="componentKey"></your-component>
</template>

<script>
export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    reloadComponent() {
      this.componentKey += 1;
    }
  }
};
</script>

在上述例子中，每当你调用 reloadComponent 方法时，componentKey 的值都会增加，这将会导致 your-component 重新创建和渲染。

2. 使用 v-if 指令

另一种方法是利用 v-if 指令来控制组件的渲染。你可以在一个变量上切换 v-if 的值，使组件先销毁，然后再重新创建。

vue
<template>
  <your-component v-if="isComponentVisible"></your-component>
</template>

<script>
export default {
  data() {
    return {
      isComponentVisible: true,
    };
  },
  methods: {
    reloadComponent() {
      this.isComponentVisible = false;
      this.$nextTick(() => {
        this.isComponentVisible = true;
      });
    }
  }
};
</script>

在这个例子中，reloadComponent 方法首先将 isComponentVisible 设置为 false，这会导致组件被销毁。然后，使用 $nextTick 方法等待 Vue 完成 DOM 更新，在回调函数中将 isComponentVisible 设置回 true，重新渲染组件。

3. 使用 forceUpdate

虽然不是最推荐的方法，因为它违背了 Vue 的响应式原则，但你也可以使用 Vue 实例的 forceUpdate 方法来强制更新视图。

javascript
this.$forceUpdate();

这将会导致组件内的所有子组件也会进行重新渲染。需要注意的是，过度使用 $forceUpdate 可能会导致性能问题，因为它绕过了 Vue 的响应式系统。

总之，通常建议尽量避免强制重新渲染组件，而是寻找更符合 Vue 响应式原理的解决办法。只有在特定情况下，当其他方法行不通时，才使用上述提到的方法。

试试这个魔法咒语：

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

无需创建任何悬挂变量:)

**更新：**当我刚开始使用 VueJS 时，我发现了这个解决方案。然而，进一步的探索证明这种方法是一种拐杖。据我记得，有一段时间我摆脱了它，只是将所有无法自动刷新的属性（主要是嵌套属性）放入计算属性中。

更多信息请参见：https ://v2.vuejs.org/v2/guide/compulated.html

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

:key="someVariableUnderYourControl"当您想要完全重建组件时，您还可以使用和更改密钥

对于我的用例，我将 Vuex getter 作为 prop 提供给组件。Vuex 会以某种方式获取数据，但反应性不会可靠地启动以重新渲染组件。就我而言，将组件设置key为 prop 上的某个属性可以保证在 getter（和属性）最终解析时刷新。

请阅读此 http://michaelnthiessen.com/force-re-render/

可怕的方法：重新加载整个页面
可怕的方法：使用 v-if hack
更好的方法：使用 Vue 的内置 forceUpdate 方法
最好的方法：在组件上更改键

shell
<template>
   <component-to-re-render :key="componentKey" />
</template>

<script>
 export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
 }
</script>

在某些情况下我也使用 watch: 。

尝试使用this.$router.go(0);手动重新加载当前页面。