关于页面的渲染不刷新问题

分类：uni-app

uniapp

我在ts文件里写了一个死菜单，然后我在页面使用，引入一个方法用于改变这个死菜单里的某个值使用map返回新的数组，同时进行赋值，但是在页面里面dom没有进行刷新渲染，这是为什么！

以下是方法，这个方法在utils/common.ts里面

/* 动态输出员工端菜单 /
export const getMenuList = (userData: UserDataType): MenuListType[] => {
return menuList.map((menu) => {
// 计算父级isShow
let parentIsShow = false;
if (menu.title === '功能管理') {
parentIsShow = userData.staffModuleCodes.includes('ProduceManagement') || false;
} else if (menu.title === '订单管理') {
parentIsShow = userData.staffModuleCodes.includes('OrderManagement') || false;
} else if (menu.title === '客户管理') {
parentIsShow = userData.staffModuleCodes.includes('CustomerManagement') || false;
} else if (menu.title === '收款管理') {
parentIsShow = userData.staffModuleCodes.includes('FinanceManagement') || false;
}

    // 计算子项isShow  
    const son = menu.son.map((item) => {  

        return {  
            ...item,  
            isShow: userData.staffModuleCodes.includes(item.mark) || false  
        };  
    });  

    return {  
        ...menu,  
        isShow: parentIsShow,  
        son  
    };  
});

};

再vue页面里我调用
<view class="menu-box">
<view class="white-box menu-class" v-for="(item, index) in originMenuList" :key="index" v-if="item

2026-02-03 19:21 负责人:无分享

1 个回复

Ask小助手 - Ask社区AI助手

欢迎到专业群（ uni-app 官方技术交流群 1 ）咨询，群中有相关专业的管理员和群友。

你遇到的问题是：
在 utils/common.ts 里用 getMenuList 生成了新的菜单数组并重新赋值给 originMenuList，但页面并没有重新渲染。

根本原因
在 uni-app（Vue）中，只有当你修改的是响应式数据本身（即数组或对象的引用发生变化，或通过 Vue 的响应式方法修改数组）时，页面才会触发更新。
你目前的写法可能是这样：

this.originMenuList = getMenuList(userData)

虽然 getMenuList 返回的是新数组，但如果 originMenuList 是在 data() 中定义的响应式数据，这种赋值方式是有效的，页面应该更新。

如果页面没更新，常见原因如下：

originMenuList 不是响应式数据
确保你在 data() 中定义了它：
```
data() {  
 return {  
   originMenuList: []  
 }  
}  
```
你修改的是数组的某个属性，而不是整个数组引用
比如你写的是：
```
this.originMenuList.splice(0, this.originMenuList.length, ...getMenuList(userData))  
```
这种写法虽然改变了数组内容，但不会触发 Vue 的响应式更新，因为 Vue 无法追踪这种“替换式”操作。

使用了 Object.assign 或解构赋值但没有替换引用
错误示例：

Object.assign(this.originMenuList, getMenuList(userData)) // ❌ 不会触发更新

正确做法：

this.originMenuList = [...getMenuList(userData)] // ✅ 替换引用

解决方案

确保你使用的是替换整个数组引用的方式：

this.originMenuList = getMenuList(userData)

并确认 originMenuList 是在 data() 中定义的响应式数据。

补充建议

如果你使用的是 Vue3 + <script setup>，确保 originMenuList 是用 ref() 或 reactive() 定义的。
如果你使用的是 Vue2，确保你没有在 created() 或 mounted() 中把 originMenuList 赋值给一个非响应式的变量。

总结一句话

页面不刷新，99% 是因为你修改的不是响应式数据的引用，或者 originMenuList 根本不是响应式数据。

内容为 AI 生成，仅供参考

要回复问题请先登录或注册

关于页面的渲染不刷新问题

1 个回复

公告

相关问题

关于页面的渲染不刷新问题

与内容相关的链接

1 个回复

公告

相关问题