`deactivated` 是 Uniapp (基于 Vue.js) 中的一个组件生命周期钩子函数，它会在组件被停用时调用。当使用 `
与 `deactivated` 对应的是 `activated` 钩子，它们共同构成了被缓存组件的特殊生命周期。
deactivated 的使用场景
1. 页面缓存时：在使用 `
2. 组件切换时：当从当前组件切换到其他组件且当前组件被保留在内存中时
3. 性能优化：适合用于清除定时器、取消事件监听等清理工作
基本使用方法
javascript
export default {
data() {
return {
timer: null
}
},
activated() {
// 组件激活时的操作
this.timer = setInterval(() => {
console.log('计时器运行中...')
}, 1000)
console.log('Component activated')
// vue3的composition API写法（setup中）
// onActivated(() => {
// console.log('Component activated')
// })
注意vue3的setup语法需要从vue引入onActivated, onDeactived等生命周期函数。
如 import { onActivated, onDeactived } from 'vue'
然后在setup中使用。
本教程主要针对options api写法。
如果需要了解composition api写法可以查阅相关文档或留言我会补充相关。
uniapp pages.json中的配置示例
json
{
"pages": [
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/detail/detail",
"style": {
"navigationBarTitleText": "详情页"
}
}
],
// globalStyle等其他配置...
}
在页面跳转时不关闭当前页面的情况下(类似小程序 navigateTo)，返回时会触发原页面的 activated。
而关闭当前页面跳转(类似小程序 redirectTo)，则不会触发 activated/deactived。
uniapp中的注意事项
1. 平台差异：
- H5端支持完整的 keep-alive
- App端和小程序端的实现有所不同，部分功能可能受限
2. 与原生生命周期的关系：
- `deactivated` ≠ `onHide`
- `activated` ≠ `onShow`
3. 常见问题解决：
javascript
// uni-app中确保正确配置页面路由
4.最佳实践建议
- (1)对于数据加载：
javascript
data() {
return {
loadedData: null,
shouldRefresh: false
}
},
activ ated() {
if(this.shouldRefresh || !this.loadedData) {
this.loadData()
this.shouldRefresh = false
}
},
methods: {
loadData() {
//加载数据...
}
}
- (2)对于事件监听：
javascript
created() {
window.addEventListener('resize', this.handleResize)
},
deactiv ated() {
window.removeEventListener('resize', this.handleResize)
},
methods:{
handleResize(){
//处理窗口大小变化...
}
}
5.与其他生命周期的执行顺序
一个完整的被缓存组件的生命周期顺序：
创建阶段：
父beforeCreate ->父created ->父beforeMount ->子beforeCreate->...->子mounted->父mounted
文章点评