解决在vue3中使用reactive响应式，赋值后造成页面不改变的问题？（二）

<script setup>
// 引入模块
import { reactive, onMounted } from 'vue'
import http from '@/utils/request'
let parmar = reactive({
  menus: [
  ]
});
onMounted(() => {
  getData()
})
const getData = async () => {
  let { data } = await http.get('/menus');
  // 这里直接赋值对象里面的数据，就不会造成把响应式替换掉的情况了，直接在页面上通过parmar.menus使用数据！
  parmar.menus = data.data;
  console.log( parmar);
}
</script>

<script setup>
// 引入模块
import { reactive, onMounted } from 'vue'
import http from '@/utils/request'
let menusList = reactive([])
onMounted(() => {
  getData()
})
const getData = async () => {
  let { data } = await http.get('/menus');
  for (let i of data.data){
    menusList.push(i);
  }
  console.log(menusList);
}
</script>