如何解决Vue页面回退时mounted函数未执行的问题？

本文共计1136个文字，预计阅读时间需要5分钟。

前言：最近做项目时遇到一个棘手的问题——从a页面跳转到b页面进行编辑，编辑完毕后返回a页面，但未调用a页面的钩子函数mounted，导致数据未更新。经过一番努力，终于找到了问题的根源。

问题描述：从a页面跳转到b页面进行编辑，编辑完成后返回a页面，却发现a页面的数据没有更新。经过检查，发现是因为未调用a页面的mounted钩子函数，导致数据未重新获取。

解决方案：在返回a页面后，手动调用a页面的mounted钩子函数，重新获取数据。

前言

最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑，编辑完再返回a页面，却没走a页面的钩子函数mounted，数据没有更新

经过一番面向百度研究，终于找到了问题所在。接下来就记录一下这个问题及其解决的方法。

原理

其实这个问题主要涉及到vue生命周期，对vue生命周期理解不够深刻的同学可以去官网学习一下：vuejs.org/v2/api/#Options-Lifecycle-Hooks

解决这个问题的关键就在于对keep-alive的理解和activated钩子函数的使用。

当在项目中引入keep-alive的时候，页面第一次进入，钩子函数的触发顺序created -> mounted -> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。

我们知道 keep-alive 之后，页面模板第一次初始化解析变成HTML片段后，再次进入就不再重新解析而是读取内存中的数据，即，只有当数据变化时，才使用VirtualDOM进行diff更新。