uni-app vue3+ts 项目在自带浏览器中不支持 ref定义的对象使用可选链

示例代码：

const a = ref({ x: '', b: '' });  

// 错误方式  
console.log(a.value?.x);  

// 正常方式  
console.log(a.value!.x);

操作步骤：

const a = ref({ x: '', b: '' });  
console.log(a.value?.x);

预期结果：

正常渲染

实际结果：

内置浏览器会提示连接服务器超时，点击屏幕重试

bug描述：

vue3+ts 项目在自带浏览器中不支持 ref定义的对象使用可选链

信息类型	信息内容
产品分类	HbuilderX
PC开发环境操作系统	Mac
PC开发环境操作系统版本号	14.1
HBuilderX版本号	3.97

itying888 1楼•10 天前

内置浏览器的chrome版本较低，可以在浏览器控制台打ua了解版本。后续会升级版本

caililin 2楼•10 天前

在 uni-app 项目中，使用 Vue 3 和 TypeScript 开发时，如果你在自带的浏览器中遇到 ref 定义的对象不支持可选链操作符（?.）的问题，可能是因为浏览器的 JavaScript 引擎不支持可选链操作符，或者你的项目配置没有正确处理可选链操作符。

解决方案

检查浏览器兼容性：
- 可选链操作符 ?. 是 ES2020 的新特性，部分旧版浏览器可能不支持。确保你使用的浏览器版本支持可选链操作符。
使用 Babel 转译：
- 如果你的项目需要兼容旧版浏览器，可以通过 Babel 将可选链操作符转译为兼容的代码。确保你的 Babel 配置中包含了 [@babel](/user/babel)/plugin-proposal-optional-chaining 插件。
安装插件：
```
npm install --save-dev [@babel](/user/babel)/plugin-proposal-optional-chaining
```
在 babel.config.js 中配置插件：
```
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    '[@babel](/user/babel)/plugin-proposal-optional-chaining'
  ]
};
```

使用 TypeScript 的 ?. 操作符：

如果你使用的是 TypeScript，确保你的 tsconfig.json 中 target 设置为 ES2020 或更高版本，以支持可选链操作符。

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

手动处理可选链：
- 如果你不想依赖 Babel 或 TypeScript 的转译，可以手动处理可选链操作符。例如，使用 && 操作符来替代可选链。
例如：
```
const value = refObj?.value;
```
可以改写为：
```
const value = refObj && refObj.value;
```