只是一个简单的问题。
你能强迫Vue.js重新加载/重新计算一切吗？如果是这样，怎么样？
试试这个魔法咒语：
vm.$forceUpdate();
无需创建任何悬挂变量:)
更新：当我开始使用VueJS时，我找到了这个解决方案。然而，进一步的探索证明这种方法是一种拐杖。据我所知，有一段时间我摆脱它只是将所有无法自动刷新的属性（大多数是嵌套的）放入计算属性中。
这对我有用。
created() {
EventBus.$on('refresh-stores-list', () => {
this.$forceUpdate();
});
},
另一个组件触发refresh-stores-list事件将导致当前组件重新呈现
：key =“$ route.params.param1”只需使用你的任何params键自动重新加载孩子..
为我工作
data () {
return {
userInfo: null,
offers: null
}
},
watch: {
'$route'() {
this.userInfo = null
this.offers = null
this.loadUserInfo()
this.getUserOffers()
}
}
这似乎是matthiasg在this issue上的一个非常干净的解决方案：
您还可以使用
:key="someVariableUnderYourControl"并在需要完全重建组件时更改密钥
对于我的用例，我将Vuex吸气剂作为支柱送入组件。不知何故，Vuex会获取数据，但反应性不会可靠地启动以重新渲染组件。在我的例子中，将组件key设置为prop上的某个属性可确保在getter（和属性）最终解析时刷新。
...你需要强制更新吗？
也许你没有最好地探索Vue：
要让Vue自动对值更改做出反应，必须首先在
data中声明对象。或者，如果没有，则必须使用Vue.set()添加它们。
请参阅下面演示中的注释。或者打开same demo in a JSFiddle here。
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，请检查Official Docs on Reactivity - Change Detection Caveats。这是必读的！
使用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
尝试使用this.$router.go(0);手动重新加载当前页面。
请阅读此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>
我也使用手表：在某些情况下。
使用v-if指令
<div v-if="trulyvalue">
<component-here />
</div>
因此，简单地将reallyvalue的值从false更改为true将导致div之间的组件再次重新呈现
我找到了一个方法。它有点hacky但有效。
vm.$set("x",0);
vm.$delete("x");
vm是你的视图模型对象，而x是一个不存在的变量。
Vue.js会在控制台日志中抱怨这一点，但它会触发所有数据的刷新。测试版本1.0.26。