mpvue编辑页返回前页面时编辑页输入的数据不自动清空的bug

• 2020 年 1 月 8 日
• 筆記

记录下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重置