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

server/2024/12/2 0:10:27/

目录

    • 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/server/146573.html

相关文章

【Leetcode】3232.判断是否可以赢得数字游戏

题目链接&#xff1a; https://leetcode.cn/problems/find-if-digit-game-can-be-won/description/?envTypedaily-question&envId2024-11-30 题目描述&#xff1a; 解题思路&#xff1a; 将数组中小于10的元素相加求和得到sum1&#xff0c;大于等于10的元素相加求和得到…

安卓-碎片的使用入门

1.碎片(Fragment)是什么 Fragment是依赖于Activity的&#xff0c;不能独立存在的,是Activity界面中的一部分&#xff0c;可理解为模块化的Activity,它能让程序更加合理和充分地利用大屏幕的空间&#xff0c;因而在平板上应用得非常广泛. Fragment不能独立存在&#xff0c;必须…

XRD精修教程:CMPR软件介绍-测试狗

1 引言 在使用GSAS软件进行XRD精修时&#xff0c;我们常常需要对数据格式进行转换&#xff0c;初步进行峰形拟合&#xff0c;处理GSAS结果等工作。那么&#xff0c;CMPR软件就是必不可少的。CMPR软件是由美国国家标准与技术研究院中子研究中心的Brian H. Toby编写的免费通用的…

高效处理 iOS 应用中的大规模礼物数据:以直播项目为例(1-礼物池)

引言 在现代iOS应用开发中&#xff0c;处理大规模数据是一个常见的挑战。尤其实在直播项目中&#xff0c;礼物面板作为展示用户互动的重要部分&#xff0c;通常需要实时显示海量的礼物数据。这些数据不仅涉及到不同的区域、主播的动态差异&#xff0c;还需要保证高效的加载与渲…

Java中TimedCache缓存对象的详细使用

一、TimedCache 是什么&#xff1f; TimedCache是一个泛型类&#xff0c;它的主要作用通常是在一定时间范围内对特定键值对进行缓存&#xff0c;并且能够根据设定的时间策略来自动清理过期的缓存项。 TimedCache是一种带有时间控制功能的缓存数据结构。在 Java 中&#xff0c…

【Docker】部署nginx

docker部署nginx docker部署nginx镜像加速器1、拉取nginx镜像2、创建nginx容器3、浏览器访问 docker部署nginx 镜像加速器 备注&#xff1a;阿里云镜像加速地址 https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors可用的镜像源&#xff1a; https://https://reg…

IP与“谷子”齐飞,阅文“乘势而上”?

爆火的“谷子经济”&#xff0c;又捧出一只“潜力股”。 近日&#xff0c;阅文集团股价持续上涨&#xff0c;5日累计涨幅达13.20%。这其中&#xff0c;周三股价一度大涨约15%至29.15港元&#xff0c;强势突破20日、30日、120日等多根均线&#xff0c;市值突破280亿港元关口。 …

#JAVA-常用API-爬虫

1.爬虫 我们在正则表达式的讲解中可以使用字符串的方法materchs()来匹配&#xff0c;并且返回一个boolean值 String name "lshhhljh"; System.out.println(name.matches("lsh{3}\\s{3}")); //true现在我们将利用正则表达式来爬取本地或者网站上的文本内…