项目错误收集
1. vue的mounted中方法未定义,会被catch住,不会错误报出来
mounted() { this.postMessage(); //postMessage未定义,console不会报错,需要特别监测 window.addEventListener('message',this.messageFunction,false); }
2. Promise不resolve也不reject,会一直等待
//消息回复方,无处理或一直未回复,则resolve一直不会执行,promise处于挂起状态,加上await,后续代码一直无法执行,莫名等待 await new Promise(resolve => { const onMessage = e => { try { const msgData = JSON.parse(e.data) if (msgData.type === 'lalala') { resolve() } } catch (error) { } } window.addEventListener('message', onMessage) //message发出 window.parent.postMessage(JSON.stringify({ type: 'lalala' }), '*') }) //后续代码 console.log('next');
3. vue的for循环中,key如果有重复,在切换数据时候,会出现莫名的错乱数据
<tr v-for="(item,index) in curWeekEvent" :key="item.dateStr">
4. vue的props若为数组,在computed中直接引用,并且修改了它,在切换数据时候,会出现莫名的错乱数据
curWeekEvent(){ // props的数组深拷贝,避免直接修改 let curWeekData = JSON.parse(JSON.stringify(this.curWeekData)); if(!curWeekData.length){ return this.getDefaultDays(); } //.... }
5. 详情页第一次进入显示不对,第二次从列表页进入详情页显示正确,原因尽可能是列表页数据加载慢,第一次进入列表页显示的是老数据,只不过显示的部分不能反应变化,所以看不出来,而详情页在需要变化的数据,所以有误。第二次进入则列表数据已经完成刷新,详情页拿到了正确数据。解决方法:列表页加loading锁定页面,加载完毕再允许点击跳转