【Vue3】第五部分 Vue3生命周期
5.Vue3生命周期
5.1 Vue3和Vue2对比图
vue2.x的生命周期
vue3.0的生命周期
5.2 通过配置项的形式使用生命周期钩子
Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名:
beforeDestroy
改名为beforeUnmount
destroyed
改名为unmounted
具体代码
<template>
<div>
<h1>计数:{{sum}}</h1>
<button @click="sum++">click me add</button>
</div>
</template>
<script>
import {ref} from "vue"
export default {
name:'TestDemo',
setup(){
let sum = ref(0)
return{
sum,
}
},
//通过配置项的形式使用生命周期钩子
beforeCreate(){
console.log("---beforeCreate");
},
created(){
console.log("---created");
},
beforeMount(){
console.log("---beforeMount");
},
mounted(){
console.log("---mounted");
},
beforeUpdate(){
console.log("---beforeUpdate");
},
updated(){
console.log("---updated");
},
beforeUnmount(){
console.log("---beforeUnmount");
},
unmounted(){
console.log("---unmounted");
},
}
</script>
<style>
</style>
5.3 通过组合式API的形式去写生命周期钩子
Vue3.0也提供了 Composition API
(组合式API )形式的生命周期钩子,与Vue2.x中钩子对应关系如下:
需要注意的是:在setup
没有提供beforeCreate
和created
生命周期钩子,将setup
当做beforeCreate
和created
,其他生命周期钩子在setup
中需要改名
beforeCreate
===>setup()
created
=======>setup()
beforeMount
===>onBeforeMount
mounted
=======>onMounted
beforeUpdate
===>onBeforeUpdate
updated
=======>onUpdated
beforeUnmount
==>onBeforeUnmount
unmounted
=====>onUnmounted
具体代码
<template>
<div>
<h1>计数:{{sum}}</h1>
<button @click="sum++">click me add</button>
</div>
</template>
<script>
import {onBeforeMount, onBeforeUnmount, onBeforeUpdate, onMounted, onUnmounted, onUpdated, ref} from "vue"
export default {
name:'TestDemo',
setup(){
let sum = ref(0)
// 通过组合式API的形式去写生命周期钩子
onBeforeMount(()=>{
console.log("----onBeforeMount");
})
onMounted(()=>{
console.log("----onMounted");
})
onBeforeUpdate(()=>{
console.log("----onBeforeUpdate");
})
onUpdated(()=>{
console.log("----onUpdated");
})
onBeforeUnmount(()=>{
console.log("----onBeforeUnmount");
})
onUnmounted(()=>{
console.log("----onUnmounted");
})
return{
sum,
}
},
总结
以上就是今天要讲的内容,本文介绍了Vue3中的生命周期钩子,希望对大家有所帮助!!