vue 提高在普通元素下嵌套的组件之间的差异直觉

8cdiaqws  于 4个月前  发布在  其他
关注(0)|答案(6)|浏览(58)

版本

2.3.3

复现链接

https://jsfiddle.net/vitorDeng/50wL7mdz/63147/

复现步骤

打开浏览器控制台,点击运行

预期结果

其他v-if的元素不应该影响互不相干的组件

实际发生情况

同级下,若前后使用了与包裹组件的元素一样的,并使用了v-if指令,则v-if指令会影响该组件不断创建和销毁

ilmyapht

ilmyapht1#

The main issue is that the components you have changed are exactly the same as those in v-if, which makes it difficult to accurately detect updates. However, you can easily fix this by adding some unique attributes to these tags, and the problem will be resolved immediately.

To avoid re-rendering the custom component in the middle, you can temporarily change:

<div><custom-component ref="componentPlugin"></custom-component></div>

to:

<div marked><custom-component ref="componentPlugin"></custom-component></div>
q3qa4bjr

q3qa4bjr2#

目前,您可以在div上使用key来标记它:https://jsfiddle.net/50wL7mdz/63293/。当然,这肯定可以得到改进。

pgccezyw

pgccezyw5#

关键是重要的。

vhmi4jdf

vhmi4jdf6#

我将尝试回答这个问题。

相关问题