当你只想重新渲染某个组件,或者销毁当前DOM并重新开始, 这个时候Vue的响应系统就差点儿意思。那如果是你遇到类似情况的话,会怎么办呢?
最行之有效的办法就是给component设置一个:key,当你需要重新渲染这个组件的时候只需要修改key的值即可。
这难道不是一个相当简单的解决办法吗?
还有一些其他的方法可以实现相同的效果:
reloading整个页面 【最差的一种方式】
使用v-if【一般的方式】
forceUpdate【比较好的方式】
key-changing 【最好的方式】
如果你想强制重新加载或者强制更新,下面会可能是比较好的方式。
很有可能你对相面的几件事情比较迷惑:
1、Vue的响应式
2、计算属性
3、监听器
4、v-for未使用:key
这里有几个强制刷新的可用Demo,大部分都可以通过key-changing方式解决,关于技术的原理在文章的末尾。
reloading整个页面
这是一种类似于“你每次想退出app时都要通过重启电脑”的方式。
我猜想这种方式有时也会很有效,但是确实是个比较糟糕的方式,这里就不必多言,不要这么干了,可以看看其他比较好的方式。
v-if
Vue的v-if指令只有当true时才会显示,false则会将其从DOM中剔除,接下来我们来看看怎么做的。
export default {
data() {
return {
renderComponent: true,