一、介绍
Vue3是时下最火的JavaScript框架之一，它提供了许多特性来简化我们的开发体验。而其中一个非常重要的特性就是onActivated。onActivated生命周期钩子函数是Vue3.x版本新增的，它是在组件切换至当前激活状态时被触发。本文将详细介绍Vue3 onActivated的使用方法、场景及其优和缺点。
二、onActivated的使用方法
onActivated是Vue3中的生命周期钩子函数，仅在使用keep-alive组件时才能被触发。当keep-alive包裹的组件被切换至当前激活状态时，onActivated便会被调用。
通过下面的代码示例，我们可以清晰地了解onActivated的使用方法：
<template>
<div>
<p>这是第{{ count }}次进入此组件</p>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increaseCount() {
this.count++
}
},
onActivated() {
this.increaseCount()
},
mounted() {
this.increaseCount()
}
}
</script>
在这个示例中，我们定义了一个名为count的变量，并通过onActivated钩子函数来自增它的值。每次这个组件被激活时，这个值就会增加1。当这个组件被挂载时也会自增1，这样我们就可以在这个组件中统计进入的次数了。
三、onActivated的场景
1、管理多个视图的状态
在实际场景中，我们可能需要管理多个视图的状态。例如，在一个购物车页面中同时展示已添加的商品列表和已购买的商品列表。当用户从商品列表跳入购物车页面时，可能需要重新请求数据，但当用户从已添加的商品列表跳转到已购买的商品列表时则不需要再次请求数据。此时我们就可以使用onActivated钩子函数来处理这个问题。
<template>
<div>
<!-- 展示已添加的商品列表 -->
<div v-if="showAdded">已添加的商品列表</div>
<!-- 展示已购买的商品列表 -->
<div v-if="showBought">已购买的商品列表</div>
</div>
</template>
<script>
export default {
data() {
return {
showAdded: true,
showBought: false
}
},
methods: {
toggleView() {
this.showAdded = !this.showAdded
this.showBought = !this.showBought
}
},
onActivated() {
this.toggleView()
}
}
</script>
在这个示例中，我们定义了两个变量showAdded和showBought，并通过判断它们的值来展示不同的商品列表。每次这个组件被激活时，我们通过使用onActivated钩子函数来切换是否展示市场中的商品列表。
2、判断是否需要执行某些操作
在一些组件在切换过程中，可能需要执行一些异步操作，例如获取数据或者修改页面的样式。而当组件被切换至非激活状态时，异步操作可能还没完成，这就可能出现一些问题。这时我们可以使用onActivated生命周期钩子函数来解决这个问题。
<template>
<div>
<h1 :style="{ color: color }">{{ title }}</h1>
</div>
</template>
<script>
export default {
data() {
return {
color: '',
title: ''
}
},
methods: {
async fetchTitle() {
const res = await fetch('https://example.com/title')
const data = await res.json()
this.title = data.title
}
},
async mounted() {
await this.fetchTitle()
},
async onActivated() {
if (!this.title) {
await this.fetchTitle()
}
this.color = 'red'
}
}
</script>
在这个示例中，我们定义了一个fetchTitle方法，通过异步获取远程服务器上的标题，并将其存储在title变量中。在组件被挂载时，我们会调用这个方法来获取标题。在组件被激活时，我们会检测title是否已经有值，如果没有，则调用fetchTitle来获取标题。然后我们会将标题的颜色设置为红色。
3、动态重新渲染组件
在一些特殊的场景中，我们可能需要在组件被激活时重新渲染组件。例如，在一个轮播图组件中，每次用户在轮播图内切换时，我们需要重新渲染这个组件以更新当前轮播图的信息。此时我们便可以使用onActivated钩子函数来实现。
<template>
<div>
<p>当前Index：{{ currentIndex }}</p>
<img :src="src[currentIndex]" />
</div>
</template>
<script>
export default {
data() {
return {
currentIndex: 0,
src: [
'https://example.com/img1.jpg',
'https://example.com/img2.jpg',
'https://example.com/img3.jpg',
]
}
},
methods: {
async fetchCurrentIndex() {
const res = await fetch('https://example.com/currentIndex')
const data = await res.json()
this.currentIndex = data.index
}
},
async onActivated() {
await this.fetchCurrentIndex()
this.$forceUpdate()
}
}
</script>
在这个示例中，我们定义了一个名为currentIndex的变量，以及一个存储轮播图信息的src数组。同时我们将在fetchCurrentIndex方法中异步获取远程服务器上的currentIndex值。在组件被激活时，我们会将currentIndex的值更新为服务器上的currentIndex值，并调用$forceUpdate来强制组件重新渲染。
四、onActivated的优与缺点
优点
使用onActivated钩子函数可以有效简化我们的代码，并提升我们的开发效率。其具备以下优点：
- 可以方便地管理多个视图的状态
- 可以判断是否需要执行异步操作
- 可以动态重新渲染组件
缺点
使用onActivated钩子函数可能会导致一些不必要的渲染，其具备以下缺点：
- 不太适用于复杂组件
- 可能会出现性能问题
五、结论
onActivated是Vue3中非常重要的一个生命周期钩子函数，它能够为我们的开发带来很多方便。鉴于其存在的缺点，我们需要在使用过程中仔细考虑，以确保组件能够正常运行。
