使用Vue3的生命周期钩子,有两种写法,
- 通过配置项的形式使用生命周期钩子。
- 通过组合式API的形式使用生命周期钩子。
通过配置项的形式使用生命周期钩子
Vue3有如下生命周期钩子,分别是,
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeUnmount
unmounted
看具体例子吧。
- main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
- App.vue
<template>
<button @click="isShowDemo = !isShowDemo">切换(隐藏/显示)</button>
<Demo v-if="isShowDemo"/>
</template>
<script>
import Demo from './components/Demo.vue'
import {ref} from "vue";
export default {
name: 'App',
components: {
Demo
},
setup(){
let isShowDemo = ref(true);
return {isShowDemo};
}
}
</script>
- Demo.vue
<template>
<h2>sum的当前值为:{{sum}}</h2>
<button @click="sum++">点我+1</button>
</template>
<script>
import {ref} from "vue";
export default {
name: 'Demo',
setup(){
let sum = ref(0);
return {
sum
}
},
beforeCreate(){
console.log("Demo Enter: beforeCreate");
},
created(){
console.log("Demo Enter: created");
},
beforeMount(){
console.log("Demo Enter: beforeMount");
},
mounted(){
console.log("Demo Enter: mounted");
},
beforeUpdate(){
console.log("Demo Enter: beforeUpdate");
},
updated(){
console.log("Demo Enter: updated");
},
beforeUnmount(){
console.log("Demo Enter: beforeUnmount");
},
unmounted(){
console.log("Demo Enter: unmounted");
}
}
</script>
- 启动应用,测试效果
通过组合式API的形式使用生命周期钩子
选项式生命周期钩子和组合式API之间的映射关系是,
-> 使用beforeCreate
setup()
-> 使用created
setup()
beforeMount
->onBeforeMount
mounted
->onMounted
beforeUpdate
->onBeforeUpdate
updated
->onUpdated
beforeUnmount
->onBeforeUnmount
unmounted
->onUnmounted
看具体例子。
- main.js
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
- App.vue
<template>
<button @click="isShowDemo = !isShowDemo">切换(隐藏/显示)</button>
<Demo v-if="isShowDemo"/>
</template>
<script>
import Demo from './components/Demo.vue'
import {ref} from "vue";
export default {
name: 'App',
components: {
Demo
},
setup(){
let isShowDemo = ref(true);
return {isShowDemo};
}
}
</script>
- Demo.vue
<template>
<h2>sum的当前值为:{{sum}}</h2>
<button @click="sum++">点我+1</button>
</template>
<script>
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue";
export default {
name: 'Demo',
setup(){
let sum = ref(0);
onBeforeMount(() => {
console.log("Demo enter: onBeforeMount")
})
onMounted(() => {
console.log("Demo enter: onMounted")
})
onBeforeUpdate(() => {
console.log("Demo enter: onBeforeUpdate")
})
onUpdated(() => {
console.log("Demo enter: onUpdated")
})
onBeforeUnmount(() => {
console.log("Demo enter: onBeforeUnmount")
})
onUnmounted(() => {
console.log("Demo enter: onUnmounted")
})
return {
sum
}
}
}
</script>
- 启动应用,测试效果