问题
Q1:从a页面跳到b页面进行编辑,编辑完再返回a页面,却没走a页面的钩子函数mounted,数据没有更新
Q-2:a--b--a--b,b页面的mounted没有执行
原理
其实这个问题主要涉及到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中。
keepAlive
<keep-alive :include="keepAlive">
<router-view></router-view>
</keep-alive>
beforeRouteLeave(to, from, next) {
if (to.path === '/schoolDataStandard/edit') {
this.$store.commit('setKeepAlive',['schoolStandard']) //schoolStandard 页面的name
} else {
// 否则keepAlive设为 false
this.$store.commit('setKeepAlive',[])
}
next();
},
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('实例销毁后调用。')
},
**activated和deactivated配合keep-alive标签使用!**
activated () {
console.log('实例被激活时使用,用于重复激活一个实例的时候')
},
deactivated () {
console.log('实例没有被激活时')
},
总结
keep-alive是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM;导致在组件mounted钩子中调用的刷新页面内容时,这个钩子没有被调用。