<template>
<div id="hello">我是hello组件</div>
<div>{{ count }}</div>
<button @click="count++">增加</button>
</template>
<script setup lang="ts">
import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, ref } from 'vue'
const count = ref<number>(0)
onBeforeMount(() => {
let div = document.querySelector('#hello')
console.log('创建之前 ===> onBeforeMount, 当前不能获取到dom元素', div)
})
onMounted(() => {
let div = document.querySelector('#hello')
console.log("创建完成 ===> onMounted, 当前能获取到dom元素", div)
})
onBeforeUpdate(() => {
console.log('更新之前 ===> onBeforeUpdate')
})
onUpdated(() => {
console.log('更新之后 ===> onUpdated')
})
onBeforeUnmount(() => {
console.log('卸载之前 ===> onBeforeUnmount')
})
onUnmounted(() => {
console.log('卸载之后 ===> onUnmounted')
})
</script>
<style lang="less" scoped>
</style>