How to solve the problem that the page does not change after using reactive assignment in vue3

Scenario reason

We need to use the server's data to render to the page in vue3. I use the responsive data generated by reactive properties, but the requested data is not rendered and displayed on the page after mounting.

Technology: vue3, element-ui-plus

1. Example

home.vue

<template>
  <div class="common-layout">
    <el-menu @select="changeMenu" :collapse="isCollapse" active-text-color="#409eff" background-color="#333744"
      class="el-menu-vertical-demo" default-active="2" text-color="#fff" :unique-opened="true">
      <el-sub-menu :index="item.path" v-for="(item) in parmar.menus" :key="item.id">
        <template #title>
          <el-icon>
            <List />
          </el-icon>
          <span>{{ item.authName }}</span>
        </template>
        <el-menu-item :index="item2.path" v-for="(item2) in item.children" :key="item2.id">
          <el-icon>
            <Menu />
          </el-icon>
          {{ item2.authName }}
        </el-menu-item>
      </el-sub-menu>
    </el-menu>
  </div>
</template>
<script setup>
// 引入模块
import { reactive, onMounted } from &#39;vue&#39;
import { useRouter } from &#39;vue-router&#39;
import http from &#39;@/utils/request&#39;
const router = useRouter();
let menusList = reactive([
]);
onMounted(() => {
  getData()
})
const getData = async () => {
  let { data } = await http.get(&#39;/menus&#39;);
  // 这里直接赋值，会导致menusList失去响应式了
  menusList = data.data;
  console.log(menusList);
}
const changeMenu = (key) => {
  router.push(&#39;/home/&#39; + key)
}
</script>
<style lang="less" scoped>
.common-layout {
  height: 100vh;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  /deep/.el-menu--vertical {
    margin: 0;
    border-right: none !important;
    overflow-x: hidden;
    height: calc(100vh - 100px);
    user-select: none;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
  }
}
</style>

By direct assignment, we can see that the data becomes ordinary data and is not responsive.

2. Solution

1. Use ref to store responsive data

The code is as follows:

<script setup>
// 引入模块
import { ref, reactive, onMounted } from &#39;vue&#39;
import http from &#39;@/utils/request&#39;
let menusList = ref([
]);
onMounted(() => {
  getData()
})
const getData = async () => {
  let { data } = await http.get(&#39;/menus&#39;);
  // 这里直接赋值value，在页面上直接使用menusList即可！
  menusList.value = data.data;
}
</script>

It can be seen that the printed data is data hijacked by ref and is responsive.

2. Use objects to wrap the data to be changed in reactive

The code is as follows:

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

Use This way, the data is also responsive.

3. The for of loop pushes to the reactive data without destroying the data structure

The code is as follows:

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

The above is the detailed content of How to solve the problem that the page does not change after using reactive assignment in vue3. For more information, please follow other related articles on the PHP Chinese website!