mpvue編輯頁返回前頁面時編輯頁輸入的數據不自動清空的bug

記錄下mpvue框架下做數據編輯頁時出現的bug處理方法

結合網上搜索到的一些處理方法在此重新整理一番

步驟 1.編輯頁面輸入數據 2.點擊左上角返回按鈕 3.再次進入編輯頁面結果發現第1步輸入的數據仍然顯示在頁面上，數據沒有被清空

網友的方法 1.mounted時執行重置

mounted () {  	Object.assign(this.$data, this.$options.data())  }

2.onLoad時執行重置

onLoad () {  	Object.assign(this.$data, this.$options.data())  }

測試有效，可以發現編輯頁的數據被成功重置

部落客最近做的頁面是登錄後跳轉首頁(tab頁)，首頁會顯示數據列表及一個添加按鈕(點擊後彈出編輯模態框) 此時比較特殊，網友提供的在mounted/onLoad函數中重置的方法在這時就不適用了。

方法缺陷: vue的create,mounted等生命周期鉤子函數只執行一次，當組件創建並被掛載到DOM上以後，就不會執行了，所以這就導致在上述小程式場景中我們左右切換tab頁時模態框中的輸入值並沒有被清空。這種方法不適用於tab頁。

如何改進? 我們已經知道這個問題根源在於mounted只執行一次，所以只要把重置程式碼放入onShow鉤子函數中就可以了每次頁面顯示後再重置數據

onShow() {    Object.assign(this.$data, this.$options.data())    this.init()//頁面數據初始化  },

測試可以發現數據被成功重置