在Vue中，不同组件会经历一套创建到销毁的步骤，在此过程中Vue会在合适的时机调用对应的函数，这些函数被称为生命周期钩子。
而这些生命周期钩子，在Vue2和3之中的称呼是不一样的。
我们先看下Vue2之中的钩子，也是四个周期
创建 挂载 更新 销毁
创建： beforeCreate created
挂载： beforeMount mounted
更新： beforeUpdate updated
销毁： beforeDestory destroyed
这里我们给出一个在Vue2中的script片段
<scirpt>
export default{
name: ‘Person’,
data(){
return {
sum: 1
}
},
methods:{
add(){
this.sum += 1
}
}
}
</scirpt>
在这个代码片段之中，我们需要针对sum这个变量进行监控，比如其相关的更新操作。
只需要进行如下的函数书写
<scirpt>
export default{
name: ‘Person’,
data(){
return {
sum: 1
}
},
methods:{
add(){
this.sum += 1
}
}，
beforeCreate(){
console.log(“创建之前”)
}，
created(){
console.log(“创建完毕”)
}，
beforeUpdate(){
console.log(“更新之前”)
}，
updated(){
console.log(“更新完毕”)
},
beforeDestroy(){
console.log(“销毁之前”)
}，
destroy(){
console.log(“销毁完毕”)
}
}
</scirpt>
那么回到Vue3,Vue3的生命周期类似，也是分为了创建，挂载 更新 卸载
不过在创建阶段，由原本的beforeCreate和created
改为了setup
其次是挂载阶段，改为了onBeforeMount onMounted
更新阶段改为了， onBeforeUpdate onUpdated
卸载阶段改为了，onBeforeUnmount onUnmounted
<script lang=”ts” setup name=”Person”>
import {
ref,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
onBeforeUnmount,
onUnmounted
} from ‘vue’
// 数据
let sum = ref(0)
// 方法
function changeSum() {
sum.value += 1
}
console.log(‘setup’)
// 生命周期钩子
onBeforeMount(()=>{
console.log(‘挂载之前’)
})
onMounted(()=>{
console.log(‘挂载完毕’)
})
onBeforeUpdate(()=>{
console.log(‘更新之前’)
})
onUpdated(()=>{
console.log(‘更新完毕’)
})
onBeforeUnmount(()=>{
console.log(‘卸载之前’)
})
onUnmounted(()=>{
console.log(‘卸载完毕’)
})
</script>
常用的就是onMounted和onUpdated/
onUpdated(() => {
// 文本内容应该与当前的 `count.value` 一致
console.log(document.getElementById(‘count’).textContent)
})
同时我们说下自定义hook
其实就是多个函数或者变量的封装，按照文件为单位，进行相关的封装，更加容易复用。
比如我们封装一个获取小狗图片的hook
| import {reactive,onMounted} from ‘vue’
import axios,{AxiosError} from ‘axios’ export default function(){ let dogList = reactive<string[]>([]) // 方法 async function getDog(){ try { // 发请求 let {data} = await axios.get(‘https://dog.ceo/api/breed/pembroke/images/random’) // 维护数据 dogList.push(data.message) } catch (error) { // 处理错误 const err = <AxiosError>error console.log(err.message) } } // 挂载钩子 onMounted(()=>{ getDog() }) //向外部暴露数据 return {dogList,getDog} } |
这下我们在父类之中，就可以通过
<script setup lang=”ts”>
import useDog from ‘./hooks/useDog’
let {dogList,getDog} = useDog()
</script>
进行使用