100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > vue避免重新渲染_Vue之重新渲染组件的正确方式

vue避免重新渲染_Vue之重新渲染组件的正确方式

时间:2020-11-21 06:08:08

相关推荐

vue避免重新渲染_Vue之重新渲染组件的正确方式

当你只想重新渲染某个组件,或者销毁当前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,

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。