8-生命周期

 

<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>