关于vue.js:解决-mpvue-经典-bug同路由切换时上次的数据会保留

关注前端小讴，浏览更多原创技术文章

因为始终在用 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！