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

devtools/2024/11/28 13:54:44/

目录

    • 1. 测试代码
    • 分析
      • 令人迷惑的效果
    • 分析原因
    • 解决方法 如何在dialog中反复触发created呢?
    • 总结


欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中

主要是在做表单的时候想要有一个编辑表单在dialog弹窗中出现,同时dialog调用的封装的表单组件,在created的生命周期中赋值传入的表单当前初始值,排查了一下午发现created中初始化初始值只有首次打开表单生效.

1. 测试代码

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

<template><div class="hello"><h1>{{ msg }}</h1></div>
</template><script>javascript">
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>javascript">
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>

在这里插入图片描述


总结

大家喜欢的话,给个👍,点个关注!给大家分享更多计算机专业学生的求学之路!

版权声明:

发现你走远了@mzh原创作品,转载必须标注原文链接

Copyright 2024 mzh

Crated:2024-3-1

欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中
『未完待续』



http://www.ppmy.cn/devtools/137677.html

相关文章

使用docker搭建hysteria2服务端

源链接&#xff1a;https://github.com/apernet/hysteria/discussions/1248 官网地址&#xff1a;https://v2.hysteria.network/zh/docs/getting-started/Installation/ 首选需要安装docker和docker compose 切换到合适的目录 cd /home创建文件夹 mkdir hysteria创建docke…

neo4j图数据库community-5.50创建多个数据库————————————————

1.找到neo4J中的conf文件&#xff0c;我的路径是&#xff1a;D:\Program Files\neo4j-community-5.5.0-windows\neo4j-community-5.5.0\conf 这里找自己的安装路径&#xff0c; 2.用管理员模式打开conf文件&#xff0c;右键管理员&#xff0c;记事本或者not 3.选中的一行新建一…

通过抓包,使用frida定位加密位置

首先我们抓取一下我们要测试的app的某一个目标api&#xff0c;通过抓api的包&#xff0c;得到关键字。 例如&#xff1a;关键字&#xff1a;x-sap-ri 我们得到想要的关键字后&#xff0c;通过拦截 类&#xff0c;寻找我们的关键字&#xff0c;及找到发包收包的位置&#xff0c…

D 型 GaN HEMT 在功率转换方面的优势

氮化镓 (GaN) 是一种 III-V 族宽带隙半导体&#xff0c;由于在用作横向高电子迁移率晶体管 (HEMT) 时具有卓越的材料和器件性能&#xff0c;因此在功率转换应用中得到越来越多的采用。 HEMT 中产生的高击穿电场 (3.3 MV/cm) 和高二维电子气 (2DEG) 载流子迁移率 (2,000 cm 2 /…

RabbitMQ 安装延迟队列插件 rabbitmq_delayed_message_exchange

前言&#xff1a; RabbitMQ 延迟队列插件&#xff08;rabbitmq_delayed_message_exchange&#xff09;是一个社区开发的插件&#xff0c;它为 RabbitMQ 添加了支持延迟消息的功能。通过这个插件&#xff0c;用户可以创建一种特殊的交换机类型 x-delayed-message&#xff0c;该…

如何搭建一个小程序:从零开始的详细指南

在当今数字化时代&#xff0c;小程序以其轻便、无需下载安装即可使用的特点&#xff0c;成为了连接用户与服务的重要桥梁。无论是零售、餐饮、教育还是娱乐行业&#xff0c;小程序都展现了巨大的潜力。如果你正考虑搭建一个小程序&#xff0c;本文将为你提供一个从零开始的详细…

开源客服中心系统的未来趋势、未来前景是什么?

开源客服中心系统的未来趋势、未来前景是什么&#xff1f; 作者&#xff1a;开源客服中心系统 FreeIPCC&#xff0c;Github地址&#xff1a;https://github.com/lihaiya/freeipcc 开源客服中心系统的未来趋势与前景呈现出一种积极向上、创新驱动的发展态势。随着人工智能、大数…

使用ENSP实现默认路由

一、项目拓扑 二、项目实现 1.路由器AR1配置 进入系统试图 sys将路由器命名为R1 sysname R1关闭信息中心 undo info-center enable 进入g0/0/0接口 int g0/0/0将g0/0/0接口IP地址配置为2.2.2.1/24 ip address 2.2.2.1 24进入g0/0/1接口 int g0/0/1将g0/0/1接口IP地址配置为1.…