当前位置：首页 > article >正文

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

article 2024/11/28 16:02:08

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-dialog
        title="提示"
        :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-dialog
        title="提示"
        :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>