uni-app reactive 对象重新赋值 出现Bug

uni-app reactive 对象重新赋值 出现Bug

示例代码：

console.log('属性值', collect['decType']);  
console.log('对象', collect);  
console.log('在打印属性值', collect['decType']);  
collect['decType'] = 222222222222  
console.log('重新赋值', collect['decType']);  
console.log('重新赋值后的对象', collect);

操作步骤：

console.log('属性值', collect['decType']);  
console.log('对象', collect);  
console.log('在打印属性值', collect['decType']);  
collect['decType'] = 222222222222  
console.log('重新赋值', collect['decType']);  
console.log('重新赋值后的对象', collect);

预期结果：

collect 对象的decType被赋值

实际结果：

collect 对象的decType未被重新赋值

bug描述：

reactive 对象重新赋值 重新取值 出现Bug
信息类型 详细信息
产品分类 uniapp/H5
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win 11
HBuilderX类型 正式
HBuilderX版本号 4.12
浏览器平台 Chrome
浏览器版本 最新
项目创建方式 HBuilderX

更多关于uni-app reactive 对象重新赋值 出现Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

collect定义的地方截图看一下

更多关于uni-app reactive 对象重新赋值 出现Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 reactive 对象时，如果直接重新赋值，可能会导致一些意外的问题。这是因为 reactive 是 Vue 3 的响应式系统的一部分，它会对对象进行深度代理，直接替换整个对象可能会破坏响应性。

常见问题

  1. 响应性丢失：直接重新赋值会导致原对象的响应性丢失，视图不会更新。
  2. 引用问题：如果其他部分代码仍然引用旧对象，可能会导致不一致的行为。

解决方案

  1. 使用 Object.assign：

    • 你可以使用 Object.assign 来合并新值到现有对象中，而不是直接替换整个对象。
    const state = reactive({ count: 0, name: 'Alice' });

// 重新赋值时使用 Object.assign
Object.assign(state, { count: 1, name: 'Bob' });

  2. 使用 ref 包裹对象：

    • 如果你需要频繁替换整个对象，可以考虑使用 ref 来包裹对象，然后通过 .value 来更新。
    const state = ref({ count: 0, name: 'Alice' });

// 重新赋值时直接替换 .value
state.value = { count: 1, name: 'Bob' };

  3. 手动触发更新：

    • 如果你必须直接替换 reactive 对象，可以在替换后手动触发更新。
    const state = reactive({ count: 0, name: 'Alice' });

// 直接替换对象
Object.assign(state, { count: 1, name: 'Bob' });

// 手动触发更新
state = reactive({ ...state });

示例代码

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({ count: 0, name: 'Alice' });

    function updateState() {
      // 不推荐直接替换
      // state = { count: 1, name: 'Bob' }; // 这会破坏响应性

      // 推荐使用 Object.assign
      Object.assign(state, { count: 1, name: 'Bob' });
    }

    return {
      state,
      updateState,
    };
  },
};
回到顶部