vue3——生命周期

生命周期

<script setup lang="ts">
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
const changeStr = () => {
  str.value = '小强'
}
// beforeCreate, created 在setup语法糖模式是没有这两个生命周期的，由setup替代
const hellowDiv = ref<HTMLDivElement>()
const str = ref<string>('小满')
// onBeforeMount是获取不到dom元素的，onMounted能获取到元素
// 渲染之前
onBeforeMount(() => {
  console.log('渲染之前', hellowDiv.value)
})

// 渲染之后
onMounted(() => {
  console.log('渲染之后', hellowDiv.value)
})

// 更新之前，获取到的是更新前的元素
onBeforeUpdate(() => { 
  console.log('更新之前', hellowDiv.value?.innerText) 
})

// 更新之后
onUpdated(() => {
  console.log('更新之后', hellowDiv.value?.innerText)
})

// 卸载之前
onBeforeUnmount(() => {
  console.log('卸载之前')
})

// 卸载之后
onUnmounted(() => {
  console.log('卸载之后')
})
</script>

<template>
  <div ref="hellowDiv">
    {{ str }}
  </div>
  <button @click="changeStr">修改str</button>
</template>

<style scoped>

</style>