【菜比前端之不起眼小bug差点要我小命】Uniapp小程序发布小程序模拟器正常，但是真机无法打开问题

项目场景及描述：

提示：这里简述项目相关背景及问题描述：

Uniapp小程序发布小程序在模拟器上运行正常，但是扫码打开体验版却有明显bug导致页面无法正常进行，如果早先发布的版本没问题，打开体验版前把旧的体验版删除，扫码新体验版就可复现bug。

这种bug最不容易发现，但是往往会导致新用户无法打开小程序，导致小程序疯狂被差评！！！
差评？这对前端程序员是极大的侮辱啊！！！

最近刚优化完两小程序，就在这里总结下，能卡住小程序进不去首页或导致页面不能正常加载的bug，总结以下了几点…

---

项目环境

开发平台：uniapp
技术栈：vue3 + pinia + js + vite3 + i18n
组件库：uview-plus
主要发布平台：微信小程序、支付宝小程序、h5、Android、IOS

Bug示例

1、如果项目使用了统一的状态管理器并安装了缓存插件
比如安装了 pinia 及 pinia-plugin-persistedstate
那么你需要在首页避免的是在 Data 中直接引用Store内定义的数据，特别是需要通过接口赋值的Store数据，然后又在首页中使用了store内定义的初始化方法，这就容易导致出现这个问题。

// data
const currentCity = ref(useCommonStore.currentCity)

// function
function init(){
	useCommonStore.getCityList().then(() => {
		cityMap.map((item, index) => {
			let areaItem = useCommonStore.cityList.filter(h => Number(h.areaId) === item)[0]
			if (areaItem != undefined) {
				endCityList.push(areaItem)
			}
		})
	})
	
}

// onLoad
onLoad(()=>{
	init()
})

如上代码所示，因为运行机制的问题，currentCity在外层定义了属性值，但是实际在项目运行中，onLoad是在页面Dom加载完成后执行的生命周期，也就是Vue的运行机制自上而下的，在外部定义的CurrentCity这属性的值是动态的，不是静态的，因而在页面加载完成后，onLoad执行阶段如果没有在此对CurrentCity赋值，那么这个bug就会导致页面的加载出现问题。

非常小的一个细节，但是很致命。

---

解决方案：

提示：这里填写该问题的具体解决方案：

解决方案也很简单，就是将动态数据放到正确的地方执行就好。

// data
const currentCity = ref('')

// function
function init(){
	useCommonStore.getCityList().then(() => {
		currentCity.value  = useCommonStore.currentCity
		cityMap.map((item, index) => {
			let areaItem = useCommonStore.cityList.filter(h => Number(h.areaId) === item)[0]
			if (areaItem != undefined) {
				endCityList.push(areaItem)
			}
		})
	})
	
}

// onLoad
onLoad(()=>{
	init()
})