『VUE』elementUI dialog的子组件created生命周期不刷新（详细图文注释）

1. 测试代码

测试代码,其中的HelloWorld是vue项目新建时默认的组件

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>
export default {name: 'HelloWorld',props: {msg: String},created() {console.log('created')alert(this.msg)}
}
</script>
<style scoped></style>

app.vue

<template><div id="app"><button @click="showComponent = !showComponent">{{ showComponent ? 'Hide' : 'Show' }}</button><el-dialogtitle="提示":visible.sync="showComponent"width="30%"><span>这是一段信息</span><HelloWorld msg="dialog"/><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog><div v-show="showComponent"><HelloWorld msg="v-show"/></div><div v-if="showComponent"><HelloWorld msg="v-if"/></div></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue'export default {name: 'App',components: {HelloWorld},data() {return {showComponent: true}}
}
</script><style></style>

分析

令人迷惑的效果

理论上应该有3个弹窗,分别提示是通过v-if / v-show / dialog 的生命周期触发的,在你页面首次加载的时候确实是这样的

之后你通过点击show按钮控制各个组件的显示隐藏,发现只有v-if 的弹窗了

分析原因

v-if 和 v-show 的区别

v-if
渲染行为：当条件为真时，v-if 会在 DOM 中添加或移除元素。条件为假时，相关的 DOM 元素会被完全销毁。
性能：在初次渲染时，v-if 会引入额外的开销，因为每次切换条件时，元素需要被创建或销毁。
使用场景：适用于需要频繁切换的状态较少的情况，或者在初次渲染时不需要显示的内容。
示例：

<div v-if="isVisible">这段内容只在 isVisible 为 true 时显示</div>

v-show
渲染行为：v-show 始终会渲染元素，但会通过设置 CSS 的 display 属性来控制元素的可见性。条件为假时，元素的 display 属性会被设置为 none。
性能：由于元素始终存在于 DOM 中，切换条件时性能开销较小，但在初次渲染时会增加一定的负担。
使用场景：适用于频繁切换显示状态的情况，特别是需要快速响应用户交互时。
示例：

<div v-show="isVisible">这段内容始终存在于 DOM 中，但根据 isVisible 的值显示或隐藏</div>

所以本质上v-show 的子组件没有销毁掉,不会反复触发created的生命周期,我感觉elementUI的dialog可能也是类似v-show,但是没有细看代码,有时间看看.

解决方法如何在dialog中反复触发created呢?

我暂时的思路是v-if子组件,把 <HelloWorld msg="dialog"/>变成了 <HelloWorld v-if="showComponent" msg="dialog"/>,通过v-if强制销毁子组件从而多次出发created
评论区的各位同仁也可以说说有没有更好的方法.

    <el-dialogtitle="提示":visible.sync="showComponent"width="30%"><span>这是一段信息</span><HelloWorld v-if="showComponent" msg="dialog"/><span slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="dialogVisible = false">确 定</el-button></span></el-dialog>