簡単な質問です。

すべてを強制的Vue.jsにリロード / 再計算できますか？もしそうなら、どうですか？

この魔法の呪文を試してください：

vm.$forceUpdate();

ぶら下がり変数を作成する必要はありません:)

更新：私がVueJSでの作業を始めたとき、私はこの解決策を見つけました。しかし、さらなる調査により、このアプローチは松葉杖として証明されました。私が覚えている限りでは、しばらくすると、自動更新に失敗したすべてのプロパティ（ほとんどはネストされたプロパティ）を計算されたプロパティに単純に入れてしまいました。

詳細はこちら：https : //vuejs.org/v2/guide/computed.html

これは、この問題に関するmatthiasgのかなりクリーンなソリューションのようです。

:key="someVariableUnderYourControl"コンポーネントを完全に再構築する場合は、キーを使用して変更することもできます

私のユースケースでは、Vuexゲッターをコンポーネントとして小道具として供給していました。どういうわけか、Vuexはデータをフェッチしますが、コンポーネントを再レンダリングするために反応性が確実に作動しません。私の場合、コンポーネントkeyをプロップの属性に設定すると、ゲッター（および属性）が最終的に解決されたときに更新が保証されました。

どうして？

... 強制的に更新する必要がありますか？

おそらく、Vueを最大限に活用しているわけではありません。

Vue が値の変更に自動的に反応するようにするには、オブジェクトを最初にで宣言dataする必要があります。または、そうでない場合は、を使用して追加するVue.set()必要があります。

以下のデモのコメントを参照してください。または、こちらのJSFiddleで同じデモを開いてください。

new Vue({
  el: '#app',
  data: {
    person: {
      name: 'Edson'
    }
  },
  methods: {
    changeName() {
      // because name is declared in data, whenever it
      // changes, Vue automatically updates
      this.person.name = 'Arantes';
    },
    changeNickname() {
      // because nickname is NOT declared in data, when it
      // changes, Vue will NOT automatically update
      this.person.nickname = 'Pele';
      // although if anything else updates, this change will be seen
    },
    changeNicknameProperly() {
      // when some property is NOT INITIALLY declared in data, the correct way
      // to add it is using Vue.set or this.$set
      Vue.set(this.person, 'address', '123th avenue.');
      
      // subsequent changes can be done directly now and it will auto update
      this.person.address = '345th avenue.';
    }
  }
})

/* CSS just for the demo, it is not necessary at all! */
span:nth-of-type(1),button:nth-of-type(1) { color: blue; }
span:nth-of-type(2),button:nth-of-type(2) { color: red; }
span:nth-of-type(3),button:nth-of-type(3) { color: green; }
span { font-family: monospace }

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <span>person.name: {{ person.name }}</span><br>
  <span>person.nickname: {{ person.nickname }}</span><br>
  <span>person.address: {{ person.address }}</span><br>
  <br>
  <button @click="changeName">this.person.name = 'Arantes'; (will auto update because `name` was in `data`)</button><br>
  <button @click="changeNickname">this.person.nickname = 'Pele'; (will NOT auto update because `nickname` was not in `data`)</button><br>
  <button @click="changeNicknameProperly">Vue.set(this.person, 'address', '99th st.'); (WILL auto update even though `address` was not in `data`)</button>
  <br>
  <br>
  For more info, read the comments in the code. Or check the docs on <b>Reactivity</b> (link below).
</div>

Vueのこの部分をマスターするには、反応性の変更に関する公式ドキュメント-変更検出に関する警告を確認してください。必読です！

これを読んで くださいhttp://michaelnthiessen.com/force-re-render/

恐ろしい方法：ページ全体をリロードする恐ろしい方法：
v-ifハックを使用する
より良い方法：Vueの組み込みforceUpdateメソッドを
使用する最良の方法：コンポーネントのキーを変更する

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

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

私は時計も使用しています。状況によっては。

を使用this.$router.go(0);して、現在のページを手動でリロードしてみてください。

を使用しvm.$set('varName', value)ます。Change_Detection_Caveatsで詳細を確認してください。

もちろん、key属性を使用するだけで、いつでも強制的に再レン​​ダリング（再作成）できます。

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

例については、https：//jsfiddle.net/mgoetzke/epqy1xgf/を参照してください

ここでも議論されました：https : //github.com/vuejs/Discussion/issues/356#issuecomment-336060875

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

それとともに、すべての更新のオブジェクト（obj）値のすべての更新の使用this.$set(obj,'obj_key',value) とuniqueKey更新this.uniqueKey++

それはこのように私のために働きました

これを行うには2つの方法があります。

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>

v-ifディレクティブの使用

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

つまり、truevalueの値をfalseからtrueに変更するだけで、div間のコンポーネントが再度レンダリングされます。

コンポーネントをリロード/再レンダリング/更新するには、長いコーディングを停止します。それを行うVue.JSの方法があります。

:key属性を使用するだけです。

例えば：

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

私はそれをBS Vue Table Slotで使用しています。このコンポーネントに対して何かをするので、それをユニークにします。

これでうまくいきました。

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

他のコンポーネントがrefresh-stores-listイベントを発生させると、現在のコンポーネントが再レンダリングされます

私は方法を発見しました。それは少しハックですが動作します。

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

どこにvmあなたのビューモデルオブジェクトであり、x存在しない変数です。

Vue.jsはコンソールログでこれについて文句を言いますが、すべてのデータの更新をトリガーします。バージョン1.0.26でテスト済み。

私のために働いた

    data () {
        return {
            userInfo: null,
            offers: null
        }
    },

    watch: {
        '$route'() {
            this.userInfo = null
            this.offers = null
            this.loadUserInfo()
            this.getUserOffers()
        }
    }

このコードを追加するだけです：

this.$forceUpdate()

幸運を

：key = "$ route.params.param1"は、任意のparamsでkeyを使用し、その子を自動的に再読み込みします。

別のタブで行った変更のために再レンダリングしたい画像ギャラリーでこの問題が発生しました。したがって、tab1 = imageGallery、tab2 = favouriteImages

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>

申し訳ありませんが、ページのリロードメソッド（ちらつき）を除いて、どれも機能しません（：keyが機能しませんでした）。

そして私は私のために働く古いvue.jsフォーラムからこの方法を見つけました：

https://github.com/vuejs/Discussion/issues/356

<template>
    <div v-if="show">
       <button @click="rerender">re-render</button>
    </div>
</template>
<script>
    export default {
        data(){
            return {show:true}
        },
        methods:{
            rerender(){
                this.show = false
                this.$nextTick(() => {
                    this.show = true
                    console.log('re-render start')
                    this.$nextTick(() => {
                        console.log('re-render end')
                    })
                })
            }
        }
    }
</script>