js vm报错_uni-app v3版本更新常见问题排查

马坚白
2023-12-01

uni-app v3版本更新常见问题排查

组件不显示或者功能异常

原因:组件内使用了 onReady,onReady 是页面的生命周期,不应在组件中直接使用,组件中应该使用 mounted 生命周期

解决方法:onReady 改为 mounted

更新组件状态,视图不更新

原因:使用了 vue 无法观测的数组更新方式(如:this.array[0]=object),相关文档

解决方法:改为可以观测的数组更新方式(如:this.array.splice(0,1,object))或者使用 $forceUpdate 强制更新视图(只支持当前组件的数据变更)

使用 setData 报错

原因:vue 不支持 setData 方法

解决方法:直接给数据赋值即可,如:this.setData({a:'a'})改为this.a='a'、page.setData({a:'a'})改为page.$vm.a='a'

js 报错:TypeError: null is not an object (evaluating '_vm.xxx.xxx')、TypeError: undefined is not an object (evaluating '_vm.xxx.xxx')

原因:模板内访问了未定义数据(null、undefined)的属性

解决方法:数据初始化为对象,或者模板内先判断对象是否存在(如:),或者使用 v-if 判断(如:,不是:)

js 报错:cid unmatched at view.umd.min.js

原因、解决办法 同上,一般出现这个错误之前会出现上一条错误提示。如果这一哥报错之前没有上一条错误提示,就排查下显示异常的组件,其导入方式是否错误(如:import { test } from './test.vue')

js 报错:Failed to mount component: template or render function not defined.

原因:删除了 main.js 文件内的 App.mpType = 'app'

解决办法:在 main.js 文件内补充上 App.mpType = 'app'

js 报错:undefined is not an object (evaluating 'this.$refs.xxx.xxx')

原因:在错误的时机(如:created 生命周期)获取子组件实例,且不加判断直接调用组件方法

解决办法:在正确的时机(如:mounted 生命周期)获取子组件示例,或者判断组件或者方法是否存在后再调用

js 报错:TypeError: page.onLoad is not a function

原因:获取页面对象后主动调用 onLoad 生命周期

解决方法:调用 vm 实例上的方法,如:page.$vm.xxx

js 报错:undefined is not an object (evaluating 'e.parentNode')

原因:main.js 文件内的 app.$mount 方法内填入了参数(如:app.$mount('#app'))

解决方法:去除 app.$mount 方法参数,改回:app.$mount()

js 报错 uni.getUpdateManager is not a function

原因:非小程序端不支持 uni.getUpdateManager 方法

解决方法:使用条件编译包裹相关代码

js 报错 page.$vm.onLoad is not a function

原因:methods 内不能使用和内置生命周期相同的方法名,也不能直接获取到生命周期对应的方法

解决方法:在 methods 内将与内置生命周期同名的方法定义为其他名称

onShow 生命周期获取不到页面传入参数

原因:onShow 生命周期无参数传入

解决方法:改在 onLoad 生命周期获取

使用 uni.createSelectorQuery 报错:page is not ready

原因:在错误的时机(如:onShwo、onLoad)调用 uni.createSelectorQuery

解决方法:改在 onReady 生命周期后获取

图像不显示

原因:使用了 img 标签加载本地图像,img 不再自动转为 image 组件,在 App 目前不支持加载本地文件(后续会优化)

解决方法:将 img 标签改为 image 标签。

img、div 等标签样式异常

原因:template 中标签使用的 img、div 等,style 中写的是 image、view 等

解决方法:标签改为一致的,比如将 template 中的 img 标签改为 image 标签,div 改为 view 标签,或者 style 中统一使用 img、div 等。

横竖屏动态切换后组件或文字比预期显示的大或小

原因:r/upx 根据屏幕宽度计算,切换屏幕方向前后计算的大小不一致

解决方法:固定屏幕方向(相关文档),或者使用其他单位:百分比、rem、vw 等(相关文档)

小程序组件库报样式错误

原因:小程序组件内部分压缩后的样式解析错误

解决方法:格式化报错的样式文件

小程序组件库不显示

问题:小程序组件内使用了 、

解决方法:手动修改对应的小程序组件去除 、 使用

组件内监听页面生命周期不生效

问题:组件内不支持直接监听页面生命周期(如:onPageScroll)

解决方法:使用js监听,参考

cover-view、cover-image 被原生组件覆盖

问题:App端 cover-view、cover-image 需要放到原生组件(video、map)内

解决方法: cover-view、cover-image 嵌套在原生组件(video、map)内:

在 js 中导入 css 报错

原因:目前 App 端不支持在 js 中导入 css(后续会优化)

解决方法:改为在对应组件(或页面)的 style 中

使用 instanceof 判断 uni-app 接口返回的数据类型与预期不符

原因:uni-app 接口(如:uni.base64ToArrayBuffer)返回的数据不支持使用 instanceof 判断类型

解决方法:改用其他方式判断类型,如:arrayBuffer instanceof ArrayBuffer改为Object.prototype.toString.call(arrayBuffer)==='[object ArrayBuffer]'

 类似资料: