關注前端小謳，閲讀更多原創技術文章

由於一直在用vue技術棧，因此初次開發小程序嘗試使用【mpvue】。儘管聽聞框架已停止維護，為了上手迅速，不顧可能存在的眾多bug，毅然用起來。

果不其然，一個大bug出現了：同一路由切換時，上一次的頁面數據會保留

項目實戰bug：mpvue重構cnode社區

github用户已在mpvue的issues給出相關原因：

參考眾多答案後，用“建頁面棧”的辦法得以解決：

const dataStack = []; // 建一個頁面棧

export default {
  data () {
    return {...};
  },
  onLoad () {
    dataStack.push({ ...this.$data }); // 備份數據
    // 其他初始化....一定要先備份，再做其他初始化
  },
  onUnload () {
    Object.assign(this.$data, dataStack.pop()); // 恢復數據
  }
}

由於 vue 的 mixin 中的代碼先於頁面執行，因此上述方法可優化到 mixin.js 文件中

let mixin = {
  data() {
    return {
      dataStack: [], // 解決mpvue相同組件數據不更新問題，建立棧堆
    };
  },
  onUnload() {
    Object.assign(this.$data, this.dataStack.pop()); // 恢復
  },
  onLoad() {
    this.dataStack.push({ ...JSON.parse(JSON.stringify(this.$data)) }); // 備份
  },
};
export default mixin;

bug得以解決：

功能和項目完整代碼參見simon-cnode（mpvue重構cnode社區），歡迎star！