Vue3中父子通信，子组件不更新视图，

当父组件向子组件传递值时，父组件的值已经发生改变，但是自组件接收到的值却没有发生改变

解决方法：

使用toRefs将defineprops接收到的值转化为ref响应式数据，并且监听该值

父组件代码：

 <ProductMangerTable v-if="TableType" :TableType="TableType"></ProductMangerTable>
const TableType = ref<any>(1)
const clickTab = (name:any)=>{
    for(let item of TableHeader.value){
        if(item.name == toRaw(name.props.label).slice(0,6)){
            console.log(item.type);
            TableType.value = item.type
        }
    }
}

子组件代码：

let prop = defineProps({
    TableType:{
        type:Number,
        required:true
    }
})
const TableTypes = toRefs(prop).TableType
watch(TableTypes,(newVal,oldVal)=>{
    console.log(newVal,oldVal);
    TableTypes.value = newVal
    getTableData(pageSizes.value.toString(), currentPage1.value.toString(),TableTypes.value.toString())
})

 父组件的值发生改变，子组件的值也发生改变了，但是子组件的视图没有更新，则在子组件中的中调用渲染子组件的方法，但是不要使用立即监听，否则会报不能在初始化前加载的错误