vue3-----单个赋值解决对象直接赋值导致对象响应式失效(里面的属性值会改变不了) + 路由传参_在vue3中v-if赋值之后不会发生响应式的改变如何解决

接收路由跳转传过来的参数

//接收路由跳转传过来的参数
    const route = useRoute()
    const searchForm = reactive({
      dateTime: route.query.dateTime
    })

 Object.assign解决不了（因为Object.assign外层是深拷贝，内层是浅拷贝），只能单个赋值（用变量捯一遍），对象直接赋值导致对象响应式失效(里面的属性值会改变不了)================本篇重点===============

// params = ...searchForm 重新赋值后会，params会变成普通对象,失去响应式的效果,需要单个赋值或者使用 Object.assign
// const params = {...searchForm, gsType: route.query.gsType,ydGs: route.query.ydGs,deptId: deptId.value}
//上面这种直接赋值就会出错，加reactive也没用，试过了，别犟
    const params = Object.assign({},{
      ...searchForm, gsType: route.query.gsType,ydGs: route.query.ydGs,deptId: deptId.value
    })
    const getStatisticsInfo = () =>{
      isIndex.value = false;
      statisticsInfo(params).then( res =>{
        let data = res.data.data.list
        districTElecTableData.value = data;
      }).catch( error =>{
        console.log( 'error',error )
      })
    }
    
//上面那个拷贝没用，响应式还是没有，老老实实写在参数括号里面
// 列表
    const getDistricTElecList = () => {
      isIndex.value = true;
      //老老实实写在参数括号里面
      statisticsGq({...searchForm, gsType: route.query.gsType,ydGs: route.query.ydGs}).then( res =>{
        let data = res.data.data
        districTElecTableData.value = data;
      }).catch( error =>{
        console.log( 'error',error )
      })
    };
//再捯一遍，不直接赋值也能保留对象的响应式
    //搞个变量接收路由跳转携带的参，然后把变量赋值给响应式对象的属性
    let IdeptId = route.query.deptId
    let IydGs = route.query.ydGs
    let IgsType = route.query.gsType
    const searchForm = reactive({
      deptId: IdeptId,
      ydGs:IydGs,
      gsType:IgsType,
      beginTime: begin,
      endTime: end
    })
    
    // 表格数据
    let districTElecTableData = ref([]);
    // 列表
    const getDistricTElecList = () => {
      const param = { ...searchForm, page: dataList.page, limit: dataList.limit }
      getElectroList(param).then( res => {
        if(res.data.code == 200){
          dataList.tableData = [];
          let data = res.data.data;
          dataList.tableData = data.list;
          dataList.total = data.totalCount;
        }
      }).catch( error =>{
        console.log( 'error',error )
      })
    };

 只能单个赋值（用变量捯一遍）============================本篇重点的正确解决方法================================

          <!-- 这是页面结构，需要一个响应式对象的各个属性来绑定表单里各个组件，从而获取前端，用户选择的值 -->
          <el-form :inline="true">
          <el-form-item label="管理区">
            <el-select v-model="searchForm.deptId" placeholder="请选择管理区名称" label-width="100px" >
              <el-option v-for="item in optionsGQ" :key="item.value" :label="item.label" :value="item.value"  />
            </el-select>
          </el-form-item>
          <el-form-item label="用电归属">
            <el-select v-model="searchForm.ydGs" placeholder="请选择用电归属" label-width="100px" @change = 'handleChangeYDGS'>
              <el-option v-for="item in optionsGS" :key="item.value" :label="item.label" :value="item.value"  />
            </el-select>
          </el-form-item>
          <el-form-item label="用电类型">
            <el-select v-model="searchForm.gsType" placeholder="请选择用电类型" label-width="100px" >
              <el-option v-for="item in optionsYDLX" :key="item.value" :label="item.label" :value="item.value"  />
            </el-select>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker v-model="searchForm.beginTime" value-format="YYYY-MM-DD" type="date" placeholder="请选择开始日期"
              style="width:150px;"/>
            <span> &nbsp;-&nbsp; </span>
            <el-date-picker v-model="searchForm.endTime" value-format="YYYY-MM-DD" type="date" placeholder="请选择结束日期"
              style="width:150px;" />
          </el-form-item>
          <el-form-item label="用电单位" >
            <el-input v-model="searchForm.deptName" placeholder="请输入用电单位名称" label-width="100px" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getDistricTElecList">查询</el-button>
            <el-button @click="onReset">重置</el-button>
            <el-button type="primary" @click="backToPage">返回</el-button>
            <el-button type="primary"  icon="Download" @click="exportElecDetail">导出</el-button>
          </el-form-item>
        </el-form>

 对象的各个属性，单个赋初值（用变量捯一遍），才能保住对象searchForm的响应式

    let IdeptId = route.query.deptId
    // 用电归属
    let IydGs = route.query.ydGs
    let IdeptName = route.query.deptName ? route.query.deptName : ''
    // 用电类型
    let IgsType = route.query.gsType
    const searchForm = reactive({
      deptId: IdeptId,
      ydGs: IydGs,
      gsType: IgsType,
      beginTime: begin,
      endTime: end,
      deptName: IdeptName
    })

这样就可以创建一个对象params来组合所需的属性，同时还能保持searchForm的响应式 

    // 表格数据
    let districTElecTableData = ref([]);
    // 列表
    const getDistricTElecList = () => {
      //这样就可以创建一个对象params来组合所需的属性，同时还能保持searchForm的响应式
      const param = { ...searchForm, page: dataList.page, limit: dataList.limit }
      getElectroList(param).then( res => {
        if(res.data.code == 200){
          dataList.tableData = [];
          let data = res.data.data;
          dataList.tableData = data.list;
          dataList.total = data.totalCount;
        }
      }).catch( error =>{
        console.log( 'error',error )
      })
    };

 携带参数跳转

import { useRoute, useRouter } from 'vue-router' // useRoute跳回去，接参的;
//携带参数跳转
const handleRowClick = (row) => {
      if(row.treeNum == 1){
        router.push({
          path:'/DistricTElec/index2',
          query:{
            gsType: row.gsType,
            ydGs: row.ydGs,
            dateTime : searchForm.dateTime
          }
        })
      }
    }