Javascript 你能强制 Vue.js 重新加载/重新渲染吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32106155/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can you force Vue.js to reload/re-render?
提问by Dave
Just a quick question.
只是一个简单的问题。
Can you force Vue.jsto reload/recalculateeverything? If so, how?
您可以强制Vue.js要重新加载/重新计算的一切吗？如果是这样，如何？
回答by Boris Mossounov
Try this magic spell:
试试这个魔法咒语：
vm.$forceUpdate();
No need to create any hanging vars :)
无需创建任何悬挂变量:)
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.
更新：当我刚开始使用 VueJS 时，我发现了这个解决方案。然而，进一步的探索证明这种方法是一个拐杖。据我回忆，有一段时间我摆脱了它，只是将所有未能自动刷新的属性（主要是嵌套的）放入计算属性中。
More info here: https://vuejs.org/v2/guide/computed.html
更多信息在这里：https: //vuejs.org/v2/guide/computed.html
回答by Brian Kung
This seems like a pretty clean solution from matthiasgon this issue:
这似乎是matthiasg在这个问题上的一个非常干净的解决方案：
you can also use
:key="someVariableUnderYourControl"and change the key when you want to component to be completely rebuilt
:key="someVariableUnderYourControl"当您想要完全重建组件时，您也可以使用和更改密钥
For my use case, I was feeding a Vuex getter into a component as a prop. Somehow Vuex would fetch the data but the reactivity wouldn't reliably kick in to rerender the component. In my case, setting the component keyto some attribute on the prop guaranteed a refresh when the getters (and the attribute) finally resolved.
对于我的用例，我将一个 Vuex getter 作为道具提供给组件。Vuex 会以某种方式获取数据，但反应性无法可靠地重新渲染组件。就我而言，将组件设置为keyprop 上的某个属性可以保证在 getter（和属性）最终解析时刷新。
回答by acdcjunior
Why?
为什么？
...do you needto force an update?
...你需要强制更新吗？
Perhaps you are not exploring Vue at its best:
也许你没有尽最大努力探索 Vue：
To have Vue automaticallyreact to value changes, the objects must be initially declared in
data. Or, if not, they must be added usingVue.set().
为了让 Vue自动对值的变化做出反应，对象必须在
data. 或者，如果没有，则必须使用Vue.set().
See comments in the demo below. Or open the same demo in a JSFiddlehere.
请参阅下面演示中的评论。或者在此处的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>To master this part of Vue, check the Official Docs on Reactivity- Change Detection Caveats. It is a must read!
要掌握 Vue 的这部分内容，请查看Reactivity的官方文档- 变更检测注意事项。这是必读的！
回答by Yash
Please read this http://michaelnthiessen.com/force-re-render/
请阅读此 http://michaelnthiessen.com/force-re-render/
The horrible way: reloading the entire page
The terrible way: using the v-if hack
The better way: using Vue's built-in forceUpdate method
The best way: key-changing on your component
可怕的方法：重新加载整个页面
可怕的方法：使用 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>
I also use watch: in some situations.
我也使用 watch: 在某些情况下。
回答by Poy Chang
Try to use this.$router.go(0);to manually reload the current page.
尝试使用this.$router.go(0);手动重新加载当前页面。
回答by denis.peplin
Use vm.$set('varName', value). Look for details into Change_Detection_Caveats.
使用vm.$set('varName', value). 在Change_Detection_Caveats 中查找详细信息。
回答by mgoetzke
Sure .. you can simply use the key attribute to force re-render (recreation) at any time.
当然 .. 你可以简单地使用 key 属性随时强制重新渲染（娱乐）。
<mycomponent :key="somevalueunderyourcontrol"></mycomponent>
<mycomponent :key="somevalueunderyourcontrol"></mycomponent>
See https://jsfiddle.net/mgoetzke/epqy1xgf/for an example
参见https://jsfiddle.net/mgoetzke/epqy1xgf/示例
It was also discussed here: https://github.com/vuejs/Discussion/issues/356#issuecomment-336060875
这里也讨论过：https: //github.com/vuejs/Discussion/issues/356#issuecomment-336060875
回答by Pushkar Shirodkar
<my-component :key="uniqueKey" />
along with it use this.$set(obj,'obj_key',value)and update uniqueKeyfor every update in object (obj) value
for every update this.uniqueKey++
随着它使用this.$set(obj,'obj_key',value)和更新uniqueKey每次更新的对象（obj）值中的每个更新this.uniqueKey++
it worked for me this way
它以这种方式对我有用
回答by Shahrukh Anwar
So there's two way you can do this,
所以有两种方法可以做到这一点，
1). You can use $forceUpdate()inside your method handler i.e
1）。您可以$forceUpdate()在方法处理程序中使用，即
<your-component @click="reRender()"></your-component>
<your-component @click="reRender()"></your-component>
<script>
export default {
methods: {
reRender(){
this.$forceUpdate()
}
}
}
</script>
2). You can give a :keyattribute to your component and increament when want to rerender
2）。您可以:key在想要重新渲染时为您的组件和增量提供一个属性
<your-component :key="index" @click="reRender()"></your-component>
<your-component :key="index" @click="reRender()"></your-component>
<script>
export default {
data() {
return {
index: 1
}
},
methods: {
reRender(){
this.index++
}
}
}
</script>
回答by Felix Labayen
In order to reload/re-render/refresh component, stop the long codings. There is a Vue.JS way of doing that.
为了重新加载/重新渲染/刷新组件，停止长编码。有一种 Vue.JS 方法可以做到这一点。
Just use :keyattribute.
只需使用:key属性。
For example:
例如：
<my-component :key="unique" />
I am using that one in BS Vue Table Slot. Telling that I will do something for this component so make it unique.
我在 BS Vue Table Slot 中使用了那个。告诉我会为这个组件做一些事情，让它独一无二。
