Vue3中使用reactive时,后端有返回数据但dom没有更新的解决

 更新时间:2023年03月28日 09:06:20   作者:liguoyuan819  
这篇文章主要介绍了Vue3中使用reactive时,后端有返回数据但dom没有更新的解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

使用reactive时,后端有返回数据但dom没有更新

问题

在Vue3的setup中使用reactive更新数据,但是dom没有更新问题

代码:

<template>
    <div class="aside">
        <div class="collpase-btn" @click="collpaseMenu">
            <el-icon><fold /></el-icon>
        </div>
        <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            default-active="2"
            text-color="#fff"
            :collapse="store.state.isCollapse"
            @open="handleOpen"
            @close="handleClose"
        >
            <el-sub-menu :index="item.id" v-for="item in menus" :key="item.id">
                <template #title>
                    <el-icon><grid /></el-icon>
                    <span>{{item.title}}</span>
                </template>
                <el-menu-item :index="it.id" v-for="it in item.subMenuList">{{it.title}}</el-menu-item>
            </el-sub-menu>
 
        </el-menu>
    </div>
</template>
<script lang="ts">
import axios from 'axios';
import { defineComponent, onMounted, reactive } from 'vue'
import { useStore } from 'vuex';
 
export default defineComponent({
    name:'Aside',
    setup() {
        const store = useStore();
        const mensList:any = [];
        let menus = reactive(mensList);
        
        const handleOpen = (key: string, keyPath: string[]) => {
 
        }
        const handleClose = (key: string, keyPath: string[]) => {
            
        };
        const collpaseMenu = () => {
            store.dispatch('collpaseChange');
        };
        onMounted(() => {
            axios.get('/user/menu').then(res => {
            menus.mensList = res.data.menusList;
        });
        });
        return {
            handleOpen,
            handleClose,
            collpaseMenu,
            store,
            menus
        }
    },
})
</script>
 
<style lang="scss" scoped>
.el-menu-item.is-active{
    background-color: var(--el-menu-hover-bg-color);;
}
.collpase-btn{
   text-align: center;
    width: 100%;
    padding: 10px 0px;
    cursor: pointer;
    .el-icon{
        color: white;
        font-size: 24px;
    }
}
</style>

直接使用reactive()一个空数组,改变当前值时,页面不会自动刷新。

解决办法

使用reactive时,将参数变为一个对象形式,而不是单纯的数组。

当改为传入对象包裹后,页面正常显示:

关于vue3中reactive的意义

在学习Vue3的时候产生疑问:

const addForm = reactive({ // 这里面的reactive啥意思
  sysPre: null,
  diaPre: null,
  tem: null
})

查询解决

在Vue3中,响应式对象是指通过reactive函数转换而来的对象,它的属性可以被Vue自动监测,当属性值发生变化时,Vue会自动更新相关的视图。这个过程是通过Vue内部实现的响应式系统来完成的。

响应式对象的意义在于使得开发者可以更加方便地管理和操作数据。当数据被转换为响应式对象后,我们可以直接修改对象的属性值,而不需要手动调用Vue的更新函数来更新视图。这样可以极大地提高开发效率,让开发者更加专注于业务逻辑的实现。

此外,响应式对象还可以与Vue的模板语法、组件等功能无缝衔接,使得我们可以通过组合使用响应式对象和Vue的其他功能,快速开发出高效、可维护的应用程序。

在这段代码中,addForm对象被使用reactive函数转换为一个响应式对象。这意味着当addForm对象的属性sysPre,diaPre或tem发生变化时,相关的依赖将会自动更新,如绑定在模板中的表单输入框等。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3使用vue-router的完整步骤记录

    vue3使用vue-router的完整步骤记录

    Vue Router是Vue.js (opens new window)官方的路由管理器,它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌,这篇文章主要给大家介绍了关于vue3使用vue-router的相关资料,需要的朋友可以参考下
    2021-06-06
  • vue的diff算法知识点总结

    vue的diff算法知识点总结

    本篇文章给大家分享了关于vue的diff算法的相关知识点总结,有兴趣的朋友参考学习下。
    2018-03-03
  • vue实现虚拟列表功能的代码

    vue实现虚拟列表功能的代码

    这篇文章主要介绍了vue实现虚拟列表,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • vue从一个页面跳转到另一个页面并携带参数的解决方法

    vue从一个页面跳转到另一个页面并携带参数的解决方法

    这篇文章主要介绍了vue从一个页面跳转到另一个页面并携带参数的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • vue动态绑定图标的完整步骤

    vue动态绑定图标的完整步骤

    动态绑定是我们日常开发中经常遇到的一个需求,下面这篇文章主要给大家介绍了关于vue动态绑定图标的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-05-05
  • 在vue中路由使用this.$router.go(-1)返回两次问题

    在vue中路由使用this.$router.go(-1)返回两次问题

    这篇文章主要介绍了在vue中路由使用this.$router.go(-1)返回两次问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-12-12
  • Vue封装数字框组件实现流程详解

    Vue封装数字框组件实现流程详解

    这篇文章主要介绍了Vue封装数字框组件实现流程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-04-04
  • 解决Vite无法分析出动态import的类型,控制台出警告的问题

    解决Vite无法分析出动态import的类型,控制台出警告的问题

    这篇文章主要介绍了解决Vite无法分析出动态import的类型,控制台出警告的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 关于vue利用postcss-pxtorem进行移动端适配的问题

    关于vue利用postcss-pxtorem进行移动端适配的问题

    这篇文章主要介绍了关于vue利用postcss-pxtorem进行移动端适配的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-11-11
  • vue如何通过props方式在子组件中获取相应的对象

    vue如何通过props方式在子组件中获取相应的对象

    这篇文章主要介绍了vue如何通过props方式在子组件中获取相应的对象,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04

最新评论