39. Ciclos de vida de Vue Router

Parece que VueJS en su versión 3.4.29 y para adelante, ya trabaja por default con la Composition API a diferencia a lo explicado en el video que es con la Options API, lo comento ya que para lograr repetir lo explicado en este video use los Hooks correspondiente con la Composition API.  

Como hay una pequeña diferencia con las vistas que ahora se crean al crear nuevo proyecto con VueJS y con Vite, y termine usando la vista “\src\components\TheWelcome.vue” y dejo lo que le agregue y como use los Hooks correspondientes pero usando Composition API de los ciclos de vida

<script setup>
 import { onBeforeMount, onMounted, onUpdated, ref, nextTick, onUnmounted } from 'vue'
 // Equivalente a beforeCreate
 onBeforeMount(() => {
   console.log('Componente está a punto de crearse Hook onBeforeMount (equivalente a beforeCreate)')
 })
 // Equivalente a created
 onMounted(() => {
   console.log('Componente montado en el Hook onMounted (equivalente a created)')
   // Aquí puedes ejecutar código que normalmente pondrías en created()
   prueba.value = "Hola Mundo 2 [^_^]"
 })
 //El ciclo de vida updated() de la API de opciones tiene su equivalente en la API Composition con el hook "onUpdated()""
 onUpdated(() => {
   console.log('Componente actualizado usando el Hook onUpdated()')//-->Esto nunca se mostro ┗('0')┛
 })
 //El hook equivalente a unmounted() de la API de opciones, para con la API Composition de Vue 3 es onUnmounted()
 onUnmounted(() => {
   console.log('Componente se desmonta y deja de estar presente en el DOM')
 })
 // Función para cambiar el valor de `prueba`
 const cambiarPrueba = () => {
   prueba.value = 'Hola mundo 3'
   nextTick(() => {
     console.log('Actualización del DOM completada')
   })
 }
 // Definir una variable reactiva usando `ref`
 const prueba = ref("Hola mundo")
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
</script>
<template>
 <WelcomeItem>
   <template #icon>
     <DocumentationIcon />
   </template>
   <template #heading>Documentation {{ prueba }}</template>
   <button @click="cambiarPrueba">Cambiar valor de variable referenciada</button>
   Vue’s
   <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
   provides you with all information you need to get started.
 </WelcomeItem>
<!-- aqui va mas codigo del template -->
</template>