使用 el-dialog 的最佳实践是什么？

Question

直接用 v-if 去控制 el-dialog 的显示会不会更好？
这样就不用在每次关闭的时候去重置表单和相关数据了，也不用考虑回显数据的赋值时机。

props:{
    visible: {
      type: Boolean,
      require: true,
      default: false,
    },
    id: {
      type: Number,
      require: true,
      default: 0,
    },
    defaultData:{
      type: Object,
      require: true,
      default: ()=>({}),
    }
}
watch:{
    visible(newVal){
        if(newVal && this.id){
            this.$nextTick(this.initForm(this.defaultData));
        }
    }
},
methods:{
    initForm(data){
        this.form.id=data.id
        this.form.name=data.name
        this.form.age=data.age
        this.form.gender=data.gender
    },
     closeDialog(update = false) {
      if (!this.visible) return;
      this.resetForm();
      this.$emit("close", update);
    },
    resetForm() {
      this.$refs.form.resetFields();
      // resetFields() 只能重置表单数据，其他数据还需要手动重置
      // 且由于要使用 resetFields()，表单数据回显也需要延后
      this.isIndeterminate = false;
      this.checkAllCity = false;
      this.form.id = 0;
    },
}

Answer 1

思路没问题，但是太频繁打开关闭的话没有性能问题就可行

Answer 2

之前也是这么写的，有两个问题：
1、组件每次都需要重新渲染，比较耗费性能
2、使用v-if，element打开弹窗时，原生的动画效果会失去

Answer 3

这个按需使用就行
el-dialog里面有很多请求的，可以用v-if控制，打开弹框就去请求，不打开就不请求，但这也造成每次打开都会去请求
el-dialog里面有表单的，用v-if控制，每次打开都重新初始化，校验简单一些