Vue3：直接对一个响应式对象数据进行结构复制会丢失响应式效果

一、问题描述

我们在进行路由页面传参的时候，使用query方式传递数据
这个时候，接收数据的组件，会从useRoute的query属性里面获取数据
如果，这里使用结构赋值语法，那么，获取到的数据，会失去响应式。

二、解决办法

用toRefs处理一下，结构赋值获取到的query对象，就是响应式变量

<script setup lang="ts" name="About">
  import {toRefs} from 'vue'
  import {useRoute} from 'vue-router'
  let route = useRoute()
  let {query} = toRefs(route)
</script>