目录
- 1. 测试代码
- 分析
- 令人迷惑的效果
- 分析原因
- 解决方法 如何在dialog中反复触发created呢?
- 总结
欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
主要是在做表单的时候想要有一个编辑表单在dialog弹窗中出现,同时dialog调用的封装的表单组件,在created的生命周期中赋值传入的表单当前初始值,排查了一下午发现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>
总结
大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！
版权声明：
发现你走远了@mzh原创作品，转载必须标注原文链接
Copyright 2024 mzh
Crated：2024-3-1
欢迎关注 『VUE』 专栏，持续更新中
欢迎关注 『VUE』 专栏，持续更新中
『未完待续』