Vue.js: دورة حياة المكون

<!-- ❌ The "Broken" Version:Rendering Before Data Arrives -->
<template>
  <div>
    <h1>{{ user.name }}</h1>
    <p>{{ user.email }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const user = ref({})  // Empty object,Display during rendering "undefined"
fetch('/api/user')
  .then(res => res.json())
  .then(data => user.value = data)
</script>

<template>
  <div>
    <p v-if="loading">Loading...</p>
    <div v-else>
      <h1>{{ user.name }}</h1>
      <p>{{ user.email }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const user = ref(nulo)
const loading = ref(true)

// ✅ Load data in onMounted... (DOM Ready, loading status will be displayed first)
onMounted(async () => {
  const res = await fetch('/api/user')
  user.value = await res.json()
  loading.value = false
})
</script>

<script setup>
import { ref, onMounted } from 'vue'

const user = ref(null)

onMounted(async () => {
  // 1. Loading initial data
  const res = await fetch('/api/user')
  user.value = await res.json()
  
  // 2. DOM Operations(Realistic operation DOM)
  document.title = `${user.value.name} - Dashboard`
  
  // 3. Register a global event listener
  window.addEventListener('resize', handleResize)
  
  // 4. Set a Timer
  const timer = setInterval(() => {
    console.log('Tick')
  }, 1000)
  
  // ❌ Note: onUnmounted must clean up timer and listener
})
</script>

<script setup>
import { onMounted, onUnmounted } from 'vue'

let timer = nulo

onMounted(() => {
  timer = setInterval(() => console.log('Tick'), 1000)
  window.addEventListener('resize', handleResize)
})

// ✅ Cleanup:Avoiding Memory Leaks
onUnmounted(() => {
  clearInterval(timer)
  window.removeEventListener('resize', handleResize)
})
</script>

<!-- ErrorBoundary.vue Parent Component -->
<script setup>
import { onErrorCaptured, ref } from 'vue'

const error = ref(null)

onErrorCaptured((err, instance, info) => {
  console.error('Caught error:', err)
  console.log('Component:', instance)
  console.log('Info:', info)
  
  error.value = err.message
  return false  // Prevent errors from propagating upward
})
</script>

<template>
  <div>
    <p v-if="error" class="error">Error: {{ error }}</p>
    <slot v-else />
  </div>
</template>

<!-- App.vue Usage -->
<ErrorBoundary>
  <UserProfile :user-id="123" />  <!-- If an error occurs, will be caught by ErrorBoundary -->
</ErrorBoundary>

1. Parent onBeforeCreate
2. Parent setup
3. Parent onCreated
4. Parent onBeforeMount
5. Child onBeforeCreate
6. Child setup
7. Child onCreated
8. Child onBeforeMount
9. Child onMounted
10. Parent onMounted

1. Parent onBeforeUnmount
2. Child onBeforeUnmount
3. Child onUnmounted
4. Parent onUnmounted

<!-- Parent Component -->
<template>
  <button v-for="tab in tabs" :key="tab" @click="currentTab = tab">
    {{ tab }}
  </button>
  
  <!-- keep-alive Package:Switch Tab Do not destroy the component -->
  <keep-alive>
    <component :is="currentTabComponent" />
  </keep-alive>
</template>

<!-- Child component: Cached by keep-alive -->
<script setup>
import { onActivated, onDeactivated } from 'vue'

// When the component is activated(Restore from Cache)
onActivated(() => {
  console.log('Component activated')
  // Reload Data,Restore scroll position, etc.
})

// When a component is disabled(Cut but keep in cache)
onDeactivated(() => {
  console.log('Component deactivated')
  // Save Status,Pause the timer, etc.
})
</script>

<template>
  <div>
    <p v-if="loading">Loading...</p>
    <div v-else-if="user">
      <h1>{{ user.name }}</h1>
      <p>{{ user.email }}</p>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'

const props = defineProps({ userId: { type: Number, required: true } })
const user = ref(null)
const loading = ref(true)

let timer = null

onMounted(async () => {
  // 1. Loading data
  const res = await fetch(`/api/users/${props.userId}`)
  user.value = await res.json()
  loading.value = false
  
  // 2. Set a Timer (Every 30s Refresh)
  timer = setInterval(async () => {
    const res = await fetch(`/api/users/${props.userId}`)
    user.value = await res.json()
  }, 30000)
  
  // 3. Monitoring Window Size Changes
  window.addEventListener('resize', () => {
    console.log('Window resized')
  })
})

onUnmounted(() => {
  // ✅ Cleanup:Avoiding Memory Leaks
  clearInterval(timer)
  window.removeEventListener('resize', () => {})
})
</script>

<script setup>
import { 
  onBeforeMount, onMounted, 
  onBeforeUpdate, onUpdated,
  onBeforeUnmount, onUnmounted,
  onErrorCaptured, onActivated, onDeactivated 
} from 'vue'

// 1. Before Mounting
onBeforeMount(() => {
  console.log('1. Preparing to mount')
})

// 2. After mounting(Most Commonly Used)
onMounted(() => {
  console.log('2. Mounted,Loading data')
})

// 3. Before the update
onBeforeUpdate(() => {
  console.log('3. Coming Soon')
})

// 4. After the update
onUpdated(() => {
  console.log('4. Updated')
})

// 5. Before Uninstalling
onBeforeUnmount(() => {
  console.log('5. Preparing to uninstall,Free Up Resources')
})

// 6. After uninstallation
onUnmounted(() => {
  console.log('6. Uninstalled')
})

// 7. Error Handling
onErrorCaptured((err) => {
  console.erro('7. Child Component Error:', err)
  return false
})

// 8. keep-alive Activate
onActivated(() => {
  console.log('8. keep-alive Activate')
})

// 9. keep-alive Disable
onDeactivated(() => {
  console.log('9. keep-alive Disable')
})
</script>

<!-- Parent.vue -->
<template>
  <Child :data="parentData" />
</template>

<script setup>
import { onMounted } from 'vue'
onMounted(() => console.log('4. Parent mounted'))
</script>

<!-- Child.vue -->
<template>
  <p>{{ data }}</p>
</template>

<script setup>
import { onMounted } from 'vue'
onMounted(() => console.log('3. Child mounted'))
</script>

<!-- Order of Console Output:
1. Child created
2. Child mounted
3. Parent mounted
(Because the parent component must wait until the child component has finished mounting before it can mount itself) -->

<!-- ErrorBoundary.vue -->
<script setup>
import { onErrorCaptured, ref } from 'vue'

const error = ref(null)

onErrorCaptured((err, instance, info) => {
  console.error('Caught error:', err)
  console.log('Component:', instance?.$options.name)
  console.log('Info:', info)  // 'render' / 'watch' / 'lifecycle hook'
  
  error.value = err.message
  return false  // Prevent upward transmission
})
</script>

<template>
  <div v-if="error" class="error-banner">
    ⚠️ Error: {{ error }}
  </div>
  <slot v-else />
</template>

<!-- TabContainer.vue -->
<template>
  <div classe="tabs">
    <button 
      v-for="tab in tabs" 
      :key="tab"
      :classe="{ active: currentTab === tab }"
      @click="currentTab = tab"
    >
      {{ tab }}
    </button>
    
    <!-- keep-alive Cache: Preserve component state when switching away -->
    <keep-alive>
      <component :is="currentTabComponent" />
    </keep-alive>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import Home from './tabs/Home.vue'
import Profile from './tabs/Profile.vue'
import Settings from './tabs/Settings.vue'

const tabs = ['Home', 'Profile', 'Settings']
const currentTab = ref('Home')

const currentTabComponent = computed(() => {
  return { Home, Profile, Settings }[currentTab.value]
})
</script>