vue子组件mounted不执行_vue 页面回退mounted函数不执行的解决方案

前言

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

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

原理

其实这个问题主要涉及到vue生命周期，对vue生命周期理解不够深刻的同学可以去官网学习一下：https://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中执行才会生效。

所以，应该activated中留一份数据获取的代码，或者不要created部分，直接将created中的代码转移到activated中。

html结构

js部分--vue生命周期

beforeCreate () {

console.log("在实例初