BaiqiCMS网站管理系统

最近网站前端开发某个VUE前端项目时，生产环境在返回多条记录时，前端调用列表直接卡死不显示，如果是有1-3条记录时又正常。于是本地测试生产环境，发现又正常，太奇怪了，在浏览器用F12查看时，发现有一个报错，提示：vue You may have an infinite update loop in a component render function.

<van-list
	v-model="loading"
	:finished="finished"
	finished-text=""
	@load="getShopList"
>
	<span v-if="chkExpire(item)">
	<p :class="chkExpireColor(item.expireTime)">到期时间：{{item.expireTime}}</p>
	<van-button type="danger" class="bind-device">{{expireText}}</van-button>
	</span>
</van-list>

搜索查看这段报错的原因是：VUE陷入了死循环，仔细检查代码后发现，原来是在 data初始化时定义了一个 expireText，页面中直接调用 {{ expireText }} ，本来这是没有问题的，但是在返回的记录列表中，循环处理 expireText的值且没有终止条件，导致值的改变都会触发渲染方法的执行，执行渲染时，又会改变状态，于是又渲染，迟迟不能生成真实节点，不休了。

解决办法就是先处理，再赋值渲染。是在获取记录过后，直接对数据进行处理，比如说添加Key，在列表那里直接显示即可。

var oDate2 = new Date().getTime()
var oDate3 = new Date(Date.now()+7*24*60*60*1000).getTime()
let cssR = 'expire-normal'
let expireText = ''
res.data.list.forEach(item=>{
	var oDate1 = new Date(item.expireTime.replace(/-/g,"/")).getTime()
	if(oDate1 < oDate2){
		cssR = 'expire-grey'
		expireText = '店铺已过期，请续费'
	} else if(oDate2 < oDate1 && oDate1 < oDate3) {
		cssR = 'expire-orange'
		expireText = '店铺即将过期，请续费'
	}else {
		cssR = 'expire-normal'
	}
	item.expire = false
	if(oDate1 < oDate3 && (item.deviceCodes!=null&&item.deviceCodes.length>0)){
		item.expire = true
	}
	item.className = cssR
	item.expireText = expireText
})