解决element ui的dialog在vue项目中updated()生命周期过早执行的问题

问题

在最近的项目中，发现dialog的updated()函数在未打开dialog时就已经执行，在打开dialog后则不会再执行

原因

因为dialog在的关闭是通过设置style:"display:none;"来进行隐藏，所以当主页中发生变化时（因为我dialog中的数据与主页数据相关），dialog就已经执行updated（）函数了

解决方案

在dialog外层套上一个div并且设置v-if判断语句

<div v-if="enlarge">
  <el-dialog :visible.sync="enlarge">
  </el-dialog>
</div>

另外，因为项目中需要用到很多的dialog，所以我一开始的写法是将所有的dialog都放在一个Dialog.vue文件中去写，结果发现到后面同一个dialog会出现两次并进行覆盖。所以，大家可以建一个Dialog文件夹，在里面细分每一个dialog.vue文件。共勉。