10 - 生命周期钩子

[zhouLion]

<script setup lang="ts">
import { onMounted, inject, onUnmounted } from "vue"
import type { Ref } from "vue"

const timer = inject<Ref<ReturnType<typeof window.setInterval>>>("timer")
const count = inject<Ref<ReturnType<typeof window.setInterval>>>("count")

onMounted(() => {
  timer.value = window.setInterval(() => {
    count.value++
  }, 1000)
})

onUnmounted(() => {
  window.clearInterval(timer.value)
})

</script>

<template>
  <div>
    <p>
      Child Component: {{ count }}
    </p>
  </div>
</template>