您可以强制Vue.js重新加载/重新渲染吗？

所以有两种方法可以做到这一点，

1）。您可以$forceUpdate()在您的方法处理程序中使用，即

<your-component @click="reRender()"></your-component>

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

2）。您可以为:key组件赋予属性，并在需要重新渲染时隐隐现现

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

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

：key =“ $ route.params.param1”只需将key与它的任何参数一起使用，即可自动重新加载子元素。

由于在其他标签上所做的更改，我想重新呈现图像库的问题。所以tab1 = imageGallery，tab2 = favoriteImages

tab @ change =“ updateGallery（）”->这会强制我的v-for指令在每次切换标签时处理filteredImages函数。

<script>
export default {
  data() {
    return {
      currentTab: 0,
      tab: null,
      colorFilter: "",
      colors: ["None", "Beige", "Black"], 
      items: ["Image Gallery", "Favorite Images"]
    };
  },
  methods: {
    filteredImages: function() {
      return this.$store.getters.getImageDatabase.filter(img => {
        if (img.color.match(this.colorFilter)) return true;
      });
    },
    updateGallery: async function() {
      // instance is responsive to changes
      // change is made and forces filteredImages to do its thing
      // async await forces the browser to slow down and allows changes to take effect
      await this.$nextTick(function() {
        this.colorFilter = "Black";
      });

      await this.$nextTick(function() {
        // Doesnt hurt to zero out filters on change
        this.colorFilter = "";
      });
    }
  }
};
</script>

使用v-if指令

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

因此，仅通过将truevalue的值从false更改为true即可导致div之间的组件再次重​​新呈现

我找到了一个方法。这有点hacky，但可以。

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

vm您的视图模型对象在哪里，并且x是不存在的变量。

Vue.js会在控制台日志中抱怨这一点，但是会触发所有数据的刷新。已通过1.0.26版进行测试。

为了重新加载/重新渲染/刷新组件，请停止长编码。有一种Vue.JS方式可以做到这一点。

只需使用:key属性。

例如：

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

我在BS Vue表插槽中使用了那个。告诉我我将为此组件做些事情，因此使其独特。

当然，您可以随时使用key属性来强制重新渲染（创建）。

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

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

在这里也进行了讨论：https : //github.com/vuejs/Discussion/issues/356#issuecomment-336060875

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

这似乎是从漂亮干净的解决方案matthiasg关于这个问题：

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

对于我的用例，我将Vuex吸气剂作为道具送入组件。Vuex会以某种方式获取数据，但无法可靠地响应以重新呈现组件。就我而言，将组件设置为keyprop上的某个属性可确保在最终解决吸气剂（和属性）时刷新。

试试这个魔术：

vm.$forceUpdate();

无需创建任何悬挂变量：）

Update: I found this solution when I only started working with VueJS. However further exploration proved this approach as a crutch. As far as I recall, in a while I got rid of it simply putting all the properties that failed to refresh automatically (mostly nested ones) into computed properties.

More info here: https://vuejs.org/v2/guide/computed.html

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

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

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

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

我还使用watch：在某些情况下。