1. 生命周期
- 概念:
Vue
组件实例在创建时要经历一些列的初始化步骤,在此过程中vue
会在合适的时机,调用特定函数,从而让开发中有机会在特定阶段运行自己的代码,这些特定的函数统称为:生命周期钩子 - 规律:
生命周期整体分为四个阶段:分别是:创建、挂载、更新、销毁,每个阶段都有两个钩子,一前一后
Vue2
的生命周期
创建阶段:
beforeCreate
、created
挂载阶段:
beforeMount
、mounted
更新阶段:
beforeUpdate
、updated
销毁阶段:
beforeDestroy
、destroyed
Vue3
的生命周期
创建阶段:
setup
挂载阶段:
onBeforeMount
、onMounted
更新阶段:
onBeforeUpdate
、onUpdated
卸载阶段:
onBeforeUnmount
、onMounted
-
常用的钩子:
onMounted
(挂载完毕)、onUpdated
(更新完毕)、onBeforeUnmount
(卸载之前) -
示例代码
<template>当前值为{{ num }}
<button @click="changeSum">点击加1</button>function changeSum() {
num.value += 1
}
console.log('创建')onBeforeMount(() => {
</script>
console.log('挂载之前')
})
onMounted(() => {
console.log('挂载完毕')
})
onBeforeUpdate(() => {
console.log('更新之前')
})
onUpdated(() => {
console.log('更新完毕')
})
onBeforeUnmount(() => {
console.log('卸载之前')
})
onUnmounted(() => {
console.log('卸载完毕')
})
2. 自定义Hook
- 什么是
hook
? ------------本质是一个函数,把setup
函数中使用的Composition API
进行了封装,类似与Vue2
中的mixin
- 自定义
hook
的优势:复用代码,让setup
中的逻辑更清楚易懂 hooks
文件夹中,每一个功能的hook文件期望是usexxx
命名的- hook的出现诠释了
composition API
的终极意义 - 示例代码
-
useSum.ts
中内容如下:import { ref, computed, onMounted } from 'vue'
export default function() {
let sum = ref(0)let bigSum = computed(()=> {
return sum.value * 10
})onMounted(()=> {
changeSum()
})function changeSum(){
sum.value += 1
}return {sum, bigSum, changeSum}
} -
useDog.ts
中内容如下:import { reactive, onMounted } from 'vue'
import axios from 'axios'export default function(){
let dogList = reactive([])async function getDog(){
try{
let {data} = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
dogList.push(data.message)
} catch(error){
alert(error)
}
}
onMounted(() => {
getDog()
})return {dogList, getDog}
} -
组件中具体使用:
<template>当前值为{{ sum }}, 变大10倍的值是: {{ bigSum }}
<button @click="changeSum">点击加1</button>
<button @click="getDog">添加一只狗</button>let { sum, bigSum, changeSum } = useSum()
<style scoped> img{ height: 150px; margin-right: 10px; } </style>
let { dogList, getDog } = useDog()
</script>
-