记录下mpvue框架下做数据编辑页时出现的bug处理方法
结合网上搜索到的一些处理方法在此重新整理一番
现象
步骤
1.编辑页面输入数据
2.点击左上角返回按钮
3.再次进入编辑页面
结果发现第1步输入的数据仍然显示在页面上，数据没有被清空
解决方法
编辑数据存在于非tab页的情况
网友的方法
1.mounted时执行重置
mounted () {
Object.assign(this.$data, this.$options.data())
}
2.onLoad时执行重置
onLoad () {
Object.assign(this.$data, this.$options.data())
}
测试有效，可以发现编辑页的数据被成功重置
编辑数据存在于tab页的情况
博主最近做的页面是登录后跳转首页(tab页)，首页会显示数据列表及一个添加按钮(点击后弹出编辑模态框)
此时比较特殊，网友提供的在mounted/onLoad函数中重置的方法在这时就不适用了。
方法缺陷:
vue的create,mounted等生命周期钩子函数只执行一次，当组件创建并被挂载到DOM上以后，就不会执行了，所以这就导致在上述小程序场景中我们左右切换tab页时模态框中的输入值并没有被清空。
这种方法不适用于tab页。
如何改进?
我们已经知道这个问题根源在于mounted只执行一次，所以只要把重置代码放入onShow钩子函数中就可以了
每次页面显示后再重置数据
onShow() {
Object.assign(this.$data, this.$options.data())
this.init()//页面数据初始化
},
测试可以发现数据被成功重置
总结
- 新开非tab页时通过onLoad/mounted/onUnload重置
- 新开tab页时onLoad/mounted只会执行一次,需要通过onShow重置
