## 生命周期函數
```
<template>
<h1>生命周期</h1>
<p>當前求和為： {{sum}}</p>
<button @click="sum++">加一</button>
</template>
<script>
//使用setup的注意事項
import { ref,reactive,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue'
export default {
name: 'test7',
setup(){
let sum = ref(0)
//通過組合式API的形式去使用生命周期鉤子
/**
* beforeCreate 和 created 這兩個生命周期鉤子就相當于 setup 所以，不需要這兩個
*
* beforeMount ===> onBeforeMount
* mounted ===> onMounted
* beforeUpdate ===> onBeforeUpdate
* updated ===> onUpdated
* beforeUnmount ===> onBeforeUnmount
* unmounted ===> onUnmounted
*/
console.log('---setup---');
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
}
},
//這種是外層的寫法，如果想要使用組合式api的話需要放在setup中
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>
```
