uni-app 代码里定义的变量里的数据在获取的时候被强制转换了

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app 代码里定义的变量里的数据在获取的时候被强制转换了

开发环境 版本号 项目创建方式
Mac 13.7 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Mac

HBuilderX类型：正式

HBuilderX版本号：4.32

手机系统：Android

手机系统版本号：Android 12

手机厂商：模拟器

手机机型：MumuPro

页面类型：vue

vue版本：vue3

打包方式：云端

示例代码：

export const test = {  
  type: 'JSFunction',  
  value: "function () {\n    console.log('did mount');\n  }",  
  value2: 'console.log',  
  value3: "console.log('das')",  
  mounted: {  
    type: 'JSFunction',  
    value: "function () {\n    console.log('did mount');\n  }"  
  },  
  lifeCycles: {  
    mounted: {  
      type: 'JSFunction',  
      value: "function () {\n    console.log('did mount');\n  }",  
      mounted2: {  
        type: 'JSFunction',  
        value: "function () {\n    console.log('did mount');\n  }"  
      }  
    },  
    beforeMount: {  
      type: 'JSFunction',  
      value: "function () {\n    console.log('will unmount');\n  }"  
    },  
    beforeDestroy: {  
      type: 'JSFunction',  
      value: "function () {\n    console.log('will unmount');\n  }"  
    }  
  }  
};

操作步骤：

  • 定义变量，使用变量

预期结果：

  • 正确获取变量数据

实际结果：

  • 没有正确获取变量数据

bug描述：

代码里定义的变量里的数据在获取的时候被强制转换了

export const test = {    
  mounted: {    
    type: 'JSFunction',    
    value: "function () {\n    console.log('did mount');\n  }",    
    mounted2: {    
      type: 'JSFunction',    
      value: "function () {\n    console.log('did mount');\n  }"    
    }    
  },    
  beforeMount: {    
    type: 'JSFunction',    
    value: "function () {\n    console.log('will unmount');\n  }"    
  },    
  beforeDestroy: {    
    type: 'JSFunction',    
    value: "function () {\n    console.log('will unmount');\n  }"    
  }    
};

获取的时候变成了：

{  
  "mounted": {  
    "type": "JSFunction",  
    "value": "function () {\n    __f__('log','at pages/home/data-source.ts:54','did mount');\n  }"  
  },  
  "beforeMount": {  
    "type": "JSFunction",  
    "value": "function () {\n    __f__('log','at pages/home/data-source.ts:58','will unmount');\n  }"  
  },  
  "beforeDestroy": {  
    "type": "JSFunction",  
    "value": "function () {\n    __f__('log','at pages/home/data-source.ts:62','will unmount');\n  }"  
  }  
}

Harmonyos Next教程
2 回复

@DCloud_HB_WJ @DCloud_UNI_yuhe @DCloud-HBuilderX团队


在 uni-app 开发中，如果遇到变量数据在获取时被强制转换的问题，这通常与数据类型不匹配、框架内部处理机制或代码逻辑有关。下面是一些可能导致这种情况的代码示例及解决方案，主要通过确保数据类型一致性和避免隐式转换来解决。

示例1：数字与字符串的隐式转换

假设你在 data 中定义了一个数字变量，但在模板或计算属性中被当作字符串处理。

// data定义
data() {
    return {
        count: 42 // 数字
    };
}

// 模板中使用
<view>{{ count }}</view> <!-- 正确显示42 -->
<view>{{ count.toString() }}</view> <!-- 显式转换为字符串 -->

// 计算属性中错误处理
computed: {
    doubleCount() {
        // 如果某处错误地将count当作字符串处理
        return parseInt(this.count) * 2; // 本例中其实多余，但展示了处理思路
    }
}

示例2：对象属性被意外转换

如果你有一个对象属性，可能在某些操作中不小心将其转换为了其他类型。

// data定义
data() {
    return {
        user: {
            name: 'John',
            age: 30
        }
    };
}

// 方法中处理
methods: {
    updateUser() {
        // 错误地将对象转换为字符串
        let userStr = JSON.stringify(this.user);
        // 如果之后错误地将字符串转换回对象，但处理不当
        let userObj = userStr; // 这里userObj仍然是字符串
        // 正确转换回对象
        userObj = JSON.parse(userStr);
        console.log(userObj.name); // 正确输出John
    }
}

示例3：布尔值被意外转换

布尔值在处理逻辑中也可能被意外转换。

// data定义
data() {
    return {
        isActive: true
    };
}

// 模板中使用
<view>{{ isActive ? 'Active' : 'Inactive' }}</view> <!-- 正确显示Active -->

// 方法中处理
methods: {
    toggleActive() {
        // 错误地将布尔值转换为数字（虽然不常见，但展示处理思路）
        let activeNum = Number(this.isActive);
        // 然后再转换回布尔值，可能导致逻辑错误
        let activeBool = activeNum !== 0; // 这里其实能正确转换回true，但展示了不必要的转换
        this.isActive = !this.isActive; // 正确切换布尔值
    }
}

在 uni-app 中，确保数据类型的一致性是避免数据被强制转换的关键。在定义变量、传递参数、处理返回值时，都要注意数据类型的正确性。使用严格等于（===）而不是宽松等于（==）进行比较，可以帮助发现潜在的类型不匹配问题。

回到顶部