问题
- 在 router-view 外层包裹了 keep-alive 组件,A页面使用了 el-tabs 中的 el-tab-pane,并配置了属性 lazy(用于性能控制,点击才渲染)
- 正常不使用 lazy 的组件在一开始就会执行 created 和 activated 生命周期,再次进入A页面时,组件的 activated 生命周期也会执行
- 使用 lazy 的组件,A页面一开始不会渲染该组件,点击该组件后,也只会执行组件的 created 函数,离开当前A页面后,也不会销毁 lazy 组件,再次进入A页面,使用 lazy 的组件会自动执行 activated 生命周期,而不会执行 created
- bug问题:更新接口在 created 内调用,离开页面再进入页面,没有触发 created,数据未更新
解决
- 最简单:不使用 lazy,组件直接使用 activated 更新数据,第一次进入和第二次进入都会执行
- 依旧使用lazy的情况下考虑性能:在 lazy 组件中同时使用 created 和 activated 生命周期,并将更新数据的函数放在 activated 函数中,created 函数里利用 this.$options 去获取 activated 生命周期,会获取到一个数组,直接执行, 测试发现,不会在一开始就执行2个函数,所以初始点击也不会将更新函数执行2次
<el-tabs v-model="activeStep">
...
<el-tab-pane label="管理" name="tab8" lazy>
<ProcessPermission></ProcessPermission>
...
</el-tab-pane>
created() {
console.log('created -----')
this.queryParams.roleId = this.$route.query.id
this.getOrganization()
for (let fun of this.$options.activated || []) {
fun.call(this)
}
},
activated() {
console.log('activated -----')
this.queryParams.roleId = this.$route.query.id
this.$nextTick(() => {
this.accessRight('access', true)
})
},
- 考虑性能并且当前组件会作为全局页面被使用(推荐):此时使用第二种方法会导致更新接口在初始执行两次,lazy 组件使用时传入要给参数判断, 在 created 生命周期里判断该参数,决定是否强制执行一次 activated 函数
<template>
<processPermission />
</template>
<el-tabs v-model="activeStep">
...
<el-tab-pane label="管理" name="tab8" lazy>
<ProcessPermission :lazy="true"></ProcessPermission>
...
</el-tab-pane>
props: {
lazy: false
}
created() {
console.log('created')
this.queryParams.roleId = this.$route.query.id
this.getOrganization()
if (!this.lazy) return
for (let fun of this.$options.activated || []) {
fun.call(this)
}
},
ctivated() {
console.log('activated')
this.queryParams.roleId = this.$route.query.id
this.$nextTick(() => {
this.accessRight('access', true)
})
},