温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue3使用reactive赋值后页面不改变如何解决

发布时间:2023-05-16 16:59:38 来源:亿速云 阅读:154 作者:iii 栏目:编程语言

本篇内容主要讲解“vue3使用reactive赋值后页面不改变如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue3使用reactive赋值后页面不改变如何解决”吧!

    场景原因

    我们需要在vue3中使用服务器的数据渲染到页面上,我使用的是reactive生成的响应式数据属性,但是在挂载后请求的数据并没有渲染显示到页面上。

    技术:vue3element-ui-plus

    一、例子

    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 'vue'
    import { useRouter } from 'vue-router'
    import http from '@/utils/request'
    const router = useRouter();
    let menusList = reactive([
    ]);
    onMounted(() => {
      getData()
    })
    const getData = async () => {
      let { data } = await http.get('/menus');
      // 这里直接赋值,会导致menusList失去响应式了
      menusList = data.data;
      console.log(menusList);
    }
    const changeMenu = (key) => {
      router.push('/home/' + 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>

    vue3使用reactive赋值后页面不改变如何解决

    我们通过直接赋值,可以看出数据变为普通的数据了,并不是响应式的。

    二、解决方法

    1、使用ref存储响应式数据

    代码如下:

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

    vue3使用reactive赋值后页面不改变如何解决

    可以看出打印出的数据是经过ref劫持的数据,是响应式的。

    2、在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>

    vue3使用reactive赋值后页面不改变如何解决

    使用这种方式,数据也是响应式的。

    3、for of循环push到reactive数据中,不破坏数据结构

    代码如下:

    <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>

    vue3使用reactive赋值后页面不改变如何解决

    到此,相信大家对“vue3使用reactive赋值后页面不改变如何解决”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI