慎用v-if，导致dialog显示隐藏失效的坑

今天遇到一点问题，在审批弹窗里给时间组件赋默认值，但是视图不更新

其中父组件调用弹窗组件如下： 

<!--审批弹窗  -->
    <AuthourityApproval
      :approval-data="approvalData"
      v-if='dialogShow'
      :dialogShow="dialogShow"
      @submit="submiApprovalt"
    />

 子组件代码如下：

<template>
  <el-dialog title="审批" :visible.sync="dialogShow" width="45%" :close-on-click-modal="false" top="5vh">
    <el-form ref="dialogFrom" :model="formData" label-width="130px">
      <el-form-item label="申请理由：">
        <span>{{ this.approvalData.applyReason }}</span>
      </el-form-item>
      <el-form-item label="开通权限：" prop="approvaStatus" :rules="{
				required: true,
				message: '请选择开通权限',
				trigger: 'change'
			}">
        <el-select v-model="formData.approvaStatus" placeholder="请选择开通权限" clearable>
          <el-option v-for="item in OptionOfApproveStatus" :key="item.value" :label="item.label"
                     :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="开通权限时间：" prop="times" :rules="{
				required: true,
				message: '请选择开通权限时间',
				trigger: 'change'
			}">
        <el-date-picker
          v-model="formData.times"
          type="daterange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
			<el-button @click="submit(false)">取 消</el-button>
			<el-button type="primary" @click="submit(true)">确 定</el-button>
		</span>
  </el-dialog>
</template>

<script>
export default {
  name: 'EmpowerDialog',
  props: {
    approvalData: Object,
    dialogShow: Boolean
  },
  data() {
    return {
      formData: {
        times: [],
        startDate: '', // 申请权限开始时间
        endDate: '', // 申请权限计算后时间
        approvaStatus: ''
      },
      OptionOfApproveStatus:  [
        { label: '通过', value: 1 },
        { label: '不通过', value: 2 }
      ]
    }
  },
// 当父组件有v-if时，子组件的dialog的显示和隐藏状态失效导致功能无法实现
 // watch: {
 //  async dialogShow(newValue) {
 //  console.log(newValue)
 // if(newValue) {
 //   console.log('watch');
 //   await this.initDate()
 //   await this.initForm()
 //   await this.getDate()
 // }
 // if (!newValue) return
 // }
 // },
  created() {
    this.getDate()
  },
  mounted() {
  },
  methods: {
    async initForm() {
      await this.$nextTick()
      this.$refs.dialogFrom.resetFields()
    },
    // 获取默认时间
    getDate() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      month = month + 1;
      month = month.toString().padStart(2, "0");
      date = date.toString().padStart(2, "0");
      // this.approvalData.applyTime 申请权限天数
      this.addDate(`${year}-${month}-${date}`,this.approvalData.applyTime-0)
      this.formData.startDate = `${year}-${month}-${date}`  // 开始时间
      console.log(this.formData.startDate,this.formData.endDate)
      const arr = []
      arr.push(this.formData.startDate,this.formData.endDate)
      this.$set(this.formData, 'times', arr)
    },
    // date为相加前的时间， days 为 需要相加的天数
    addDate(date, days) {
      var date = new Date(date);
      date.setDate(date.getDate() + days);
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var day = date.getDate();
      var mm = "'" + month + "'";
      var dd = "'" + day + "'";
      if(mm.length === 3) {
        month = "0" + month;
      }
      if(dd.length === 3) {
        day = "0" + day;
      }
      this.formData.endDate = year + "-" + month + "-" + day  // 结束时间
    },
    // 清除数据
    initDate () {
      this.$set(this.formData, 'times', '')
      this.formData = {
        times: [],
        startDate: '',
        endDate: '',
        approvaStatus: ''
      }
    },
    submit(isUpdate) {
      if (isUpdate) {
        this.$refs.dialogFrom.validate((valid) => {
          if (valid) {
            const arr = []
            arr.push({
              id: this.approvalData.id,
              approvaStatus: this.formData.approvaStatus,
              startDate:this.formData.times[0],
              endDate: this.formData.times[1],
            })
            this.$api2.specificationDataApprova.batchApproval({
              json:JSON.stringify(arr)
            }).then(() => {
              this.$message.success('审批成功')
              this.approvalData.show = false
              this.$refs.dialogFrom.resetFields()
              this.initDate()
              this.$emit('submit', {}, isUpdate)
            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      } else {
        this.initDate()
        this.$emit('submit', {}, isUpdate)
      }
    }
  },
};
</script>

当父组件v-if存在时，会导致子组件的显示和隐藏状态失效，导致监听无法正常工作，所以只有写了created生命周期，调用getDate方法才可以正常赋值。

所以可以删除父组件的v-if，同时删除子组件created生命周期，监听就可以正常工作了

其中如果遇到$set层次渲染的问题，还可以替换用法，使用this.$forceUpdate()方法