只是一个简单的问题。
您可以强制Vue.js
要重新加载 / 重新计算的一切吗?如果是这样,怎么办?
只是一个简单的问题。
您可以强制Vue.js
要重新加载 / 重新计算的一切吗?如果是这样,怎么办?
Answers:
试试这个魔术:
vm.$forceUpdate();
无需创建任何悬挂变量:)
更新:当我仅开始使用VueJS时,我找到了此解决方案。但是,进一步的探索证明了这种方法的重要性。据我所记得,有一阵子我摆脱了它,只是将所有未能自动刷新的属性(主要是嵌套属性)放入计算的属性中。
此处提供更多信息:https : //vuejs.org/v2/guide/computed.html
$forceUpdate()
从来没有在2.5.17上为我工作过。
这似乎是从漂亮干净的解决方案matthiasg关于这个问题:
:key="someVariableUnderYourControl"
当您要完全重建组件时,也可以使用和更改密钥
对于我的用例,我将Vuex吸气剂作为道具送入组件。Vuex会以某种方式获取数据,但是无法可靠地启动反应性来重新呈现组件。就我而言,将组件设置为key
prop上的某个属性可确保在最终解决吸气剂(和属性)后刷新。
mounted
将运行,等等)
...您是否需要强制更新?
也许您没有充分利用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的这一部分,请查看有关反应性 -变化检测警告的官方文档。这是一本必读的书!
Vue.set()
也可以在组件内部使用。
请阅读此 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:在某些情况下。
尝试使用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
所以有两种方法可以做到这一点,
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表插槽中使用了那个。告诉我我将为此组件做些事情,因此使其独特。
: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>
抱歉,除了页面重新加载方法(闪烁)外,它们都不适合我(: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>