search

ElemeFE / element

A Vue.js 2.0 UI Toolkit for Web
https://element.eleme.io/
MIT License
54.11k stars 14.64k forks source link

There is a problem with the implementation of the [bug report] dialog component destroy-on-close #20628

Open Coober-Ding opened 3 years ago

Coober-Ding commented 3 years ago

Element UI version

2.14.1

OS/Browsers version

mac chrome

Vue version

2.6.12

Reproduction Link

https://codepen.io/CooberDing/pen/VwKydGN?editors=1111

Steps to reproduce

打开dialog，然后关闭dialog，注意观察控制台的log。 我根据源码发现，destroy-on-close的实现方式是 "this.key ++ "。相当于把"<div :key="key"></div>"这个dom销毁了又重新创建了，导致我dialog内的组件的mounted声明周期在关闭dialog时被调用了，很诡异。

What is Expected?

dialog内节点被销毁

What is actually happening?

节点被销毁后又被创建出来

element-bot commented 3 years ago

Translation of this issue:

Element UI version

2.14.1

OS/Browsers version

mac chrome

Vue version

2.6.12

Reproduction Link

https://codepen.io/CooberDing/pen/VwKydGN?editors=1111

Steps to reproduce

Open dialog, and then close it. Pay attention to the log of the console. According to the source code, I found that the implementation of destroy on close is“ this.key "。 It's equivalent to destroying and re creating the DOM < div: key = "key" > < / div >, which causes the mounted declaration cycle of components in my dialog to be called when closing the dialog. It's very strange.

What is Expected?

The node in dialog is destroyed

What is actually happening?

The node was destroyed and came out again

stale[bot] commented 2 years ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

WoJiaoFuXiaoYun commented 2 years ago

Element UI version 2.15.6

OS/Browsers version Windows11 edge

Vue version 2.6.12

destroy-on-close destreoyed trigger mounted