vue3的reactive赋值问题解决

// 数据结构
let filterForm = reactive({
  createDate: null,
  q: null
})

function reset() {
  filterForm = {
    createDate: null,
    q: null
  }
}

function reset() {
  filterForm.createDate = null
  filterForm.q = null
}

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: {}
  }
})

let visible = ref(false)
let modalData = reactive({})

watch{
  () => props.visible,
  (val) => {
    if(val) {
      modalData = { ...props.data }
    }
    visible = val
  }
}

let modalData = reactive({
  data: {}
})

watch{
  () => props.visible,
  (val) => {
    if(val) {
      modalData.data = { ...props.data }
    }
    visible = val
  }
}

let formData = reactive({
  updateDate: null
})

formData.updateDate = '2023-7-10'

function reset() {
	formData.updateDate = null
}

const props = defineProps({
  data:{
    type: Object,
    default: {}
  }
})

const modalData = reactive({
  data:{}
})

modalData.data = { ...props.data }

let arr = reactive([])

// 错误写法
arr = []

// 正确写法
arr.length = 0