只是一个简单的问题。
您可以强制Vue.js要重新加载/重新计算的一切吗？如果是这样，如何？
你能强制 Vue.js 重新加载/重新渲染吗？
IT技术
javascript
vue.js
frontend
reload
rerender
2021-02-09 11:59:53
6个回答
试试这个魔法咒语：
vm.$forceUpdate();
无需创建任何悬挂变量 :)
更新：当我刚开始使用 VueJS 时，我发现了这个解决方案。然而，进一步的探索证明这种方法是一个拐杖。据我回忆，有一段时间我摆脱了它，只是将所有未能自动刷新的属性（主要是嵌套的）放入计算属性中。
更多信息在这里：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: 在某些情况下。
为什么？
...你需要强制更新吗？
也许你没有尽最大努力探索 Vue：
要让 Vue自动对值变化做出react，对象必须最初在
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 的这一部分，请查看Reactivity的官方文档- 变更检测注意事项。这是必读的！
尝试使用this.$router.go(0);手动重新加载当前页面。