Vue页面回退时mounted函数不执行，如何有效解决此问题？

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

前言：最近做项目遇到一个很大的问题--从a页面跳转到b页面进行编辑，编辑完成后返回a页面，但没走a页面的mounted钩子函数，数据没有更新。经过一番搜索和研究，终于找到了问题所在。

问题描述：从a页面跳转到b页面进行编辑，编辑完成后返回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更新。故，页面进入的数据获取应该在activated中也放一份。数据加载完毕手动操作DOM的部分也应该在activated中执行才会生效。