vue页⾯回退mounted函数不执⾏的解决⽅案
前⾔
最近做项⽬碰到⼀个很头⼤的问题--从a页⾯跳到b页⾯进⾏编辑，编辑完再返回a页⾯，却没⾛a页⾯的钩⼦函数mounted，数据没有更新
经过⼀番⾯向百度研究，终于到了问题所在。接下来就记录⼀下这个问题及其解决的⽅法。
原理
解决这个问题的关键就在于对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('在实例初始化之前调⽤')
  }
  created () {
    console.log('在实例初始化之后调⽤，经常⽤于操作数据，发起ajax请求')
  }
  beforeMount () {
    console.log('在挂载开始之前被调⽤，如果是在服务器端渲染时不被调⽤；在这个函数⾥，⽆法获取元素')
  }
  mounted () {
    console.log('在挂载后被调⽤，也不能在服务器端渲染时被调⽤；这个函数⾥，是可以获取元素，并进⾏操作的')
  }
  beforeUpdate () {
    console.log('视图层数据更新前调⽤，发⽣在虚拟 DOM 打补丁之前。这⾥适合在更新之前访问现有的 DOM')
  }
  updated () {
    console.log('视图层数据更新后调⽤')
  }
  beforeDestroy () {
    console.log('实例销毁之前调⽤，在被销毁的组件中进⾏调⽤；有⼀些操作，会在实例已经销毁的时候还在运⾏，这时候为了性能考虑，就在这⾥结束哪些操作')  }
  destroyed () {
    console.log('实例销毁后调⽤。')
  }ajax实例里面的函数
activated和deactivated配合keep-alive标签使⽤！
activated () {
console.log('实例被激活时使⽤，⽤于重复激活⼀个实例的时候')
}
deactivated () {
console.log('实例没有被激活时')
}
总结
keep-alive是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防⽌重复渲染DOM；导致在组件mounted钩⼦中调⽤的刷新
页⾯内容时，这个钩⼦没有被调⽤。
故：使⽤Vue组件切换过程，执⾏钩⼦activated(keep-alive组件激活时调⽤)，⽽不是挂载钩⼦mounted。
补充知识：vue ⼦组件 created ⽅法不执⾏问题
近期做了⼀个项⽬⾥⾯有⼀个树形菜单，将数据写在 js （死数据）中，所有的东西都能够正常执⾏（i 标签，⼦节点，⽗节点），但是当在请求接⼝⽂件或者请求后台数据的时候，发现引⼊的⼦组件的created⽅法不执⾏，但是点击⽗级菜单展开时还是能够触发，后来发现是⽣命周期的问题，仔细查看⼀下，后来解决解决⽅法如下：⽤watch 检测⼀下data的数据变化，created⽅法既然在点击的时候执⾏，所以也必须保留，好啦，就这样
以上这篇vue 页⾯回退mounted函数不执⾏的解决⽅案就是⼩编分享给⼤家的全部内容了，希望能给⼤家⼀个参考，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。