项目错误收集

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锁定页面,加载完毕再允许点击跳转

原文地址:https://www.cnblogs.com/mengff/p/14818885.html