Vue.js: 组件生命周期

<!-- ❌ 翻车版：数据未到就渲染 -->
<template>
  <div>
    <h1>{{ user.name }}</h1>
    <p>{{ user.email }}</p>
  </div>
</template>

<script setup>
const { ref } = Vue

const user = ref({})  // 空对象，渲染时显示 "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>
const { ref, onMounted } = Vue

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

// ✅ 在 onMounted 中加载数据（DOM 已就绪，loading 状态会先显示）
onMounted(async () => {
  const res = await fetch('/api/user')
  user.value = await res.json()
  loading.value = false
})
</script>

<script setup>
const { ref, onMounted } = Vue

const user = ref(null)

onMounted(async () => {
  // 1. 加载初始数据
  const res = await fetch('/api/user')
  user.value = await res.json()
  
  // 2. DOM 操作（操作真实 DOM）
  document.title = `${user.value.name} - Dashboard`
  
  // 3. 注册全局事件监听
  const handleResize = () => { console.log('Window resized') }
window.addEventListener('resize', handleResize)
  
  // 4. 设置定时器
  const timer = setInterval(() => {
    console.log('Tick')
  }, 1000)
  
  // ❌ 注意：onUnmounted 中要清理 timer 和 listener
})
</script>

<script setup>
const { onMounted, onUnmounted } = Vue

let timer = null

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

// ✅ 清理：避免内存泄漏
onUnmounted(() => {
  clearInterval(timer)
  window.removeEventListener('resize', handleResize)
})
</script>

<!-- ErrorBoundary.vue 父组件 -->
<script setup>
const { onErrorCaptured, ref } = 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  // 阻止错误继续向上传播
})
</script>

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

<!-- App.vue 使用 -->
<ErrorBoundary>
  <UserProfile :user-id="123" />  <!-- 如果出错，会被 ErrorBoundary 捕获 -->
</ErrorBoundary>

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

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

<!-- 父组件 -->
<template>
  <button v-for="tab in tabs" :key="tab" @click="currentTab = tab">
    {{ tab }}
  </button>
  
  <!-- keep-alive 包裹：切换 Tab 时不销毁组件 -->
  <keep-alive>
    <component :is="currentTabComponent" />
  </keep-alive>
</template>

<!-- 子组件：被 keep-alive 缓存 -->
<script setup>
const { onActivated, onDeactivated } = Vue

// 组件被激活时（从缓存中恢复）
onActivated(() => {
  console.log('Component activated')
  // 重新加载数据、恢复滚动位置等
})

// 组件被停用时（切走但保留在缓存）
onDeactivated(() => {
  console.log('Component deactivated')
  // 保存状态、暂停定时器等
})
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <button @click="showUser = !showUser">{{ showUser ? '卸载' : '挂载' }}组件</button>
  <user-profile v-if="showUser" :user-id="1"></user-profile>
</div>

<script>
const { createApp, ref, onMounted, onUnmounted } = Vue

// 子组件：UserProfile
const UserProfile = {
  props: ['userId'],
  setup(props) {
    const user = ref(null)
    const loading = ref(true)
    let timer = null

    // 模拟 fetch（避免跨域）
    function mockFetch(id) {
      return new Promise(resolve => {
        setTimeout(() => {
          resolve({ id, name: 'Alice ' + id, email: `alice${id}@example.com` })
        }, 500)
      })
    }

    onMounted(async () => {
      // 1. 加载数据
      const data = await mockFetch(props.userId)
      user.value = data
      loading.value = false
      console.log('✅ Mounted: 数据已加载')

      // 2. 设置定时器
      timer = setInterval(() => {
        console.log('⏰ Timer tick')
      }, 5000)
    })

    onUnmounted(() => {
      // ✅ 清理：避免内存泄漏
      clearInterval(timer)
      console.log('🧹 Unmounted: 已清理定时器')
    })

    return { user, loading }
  },
  template: `
    <div style="padding: 1rem; border: 1px solid #ddd; margin: 0.5rem 0;">
      <p v-if="loading">Loading...</p>
      <div v-else-if="user">
        <h1>{{ user.name }}</h1>
        <p>{{ user.email }}</p>
      </div>
    </div>
  `
}

const App = {
  components: { UserProfile },
  setup() {
    const showUser = ref(true)
    return { showUser }
  }
}

createApp(App).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <button @click="count++">count++ ({{ count }})</button>
  <button @click="show = !show">{{ show ? '卸载' : '挂载' }}</button>
  <lifecycle-demo v-if="show" :count="count"></lifecycle-demo>
  <p style="color: #999; font-size: 0.85rem;">查看 console 输出</p>
</div>

<script>
const { createApp, ref, onBeforeMount, onMounted, onBeforeUpdate,
        onUpdated, onBeforeUnmount, onUnmounted,
        onErrorCaptured, onActivated, onDeactivated } = Vue

const LifecycleDemo = {
  props: ['count'],
  setup() {
    onBeforeMount(() => console.log('1. onBeforeMount: 准备挂载'))
    onMounted(() => console.log('2. onMounted: 已挂载'))
    onBeforeUpdate(() => console.log('3. onBeforeUpdate: 即将更新'))
    onUpdated(() => console.log('4. onUpdated: 已更新'))
    onBeforeUnmount(() => console.log('5. onBeforeUnmount: 准备卸载'))
    onUnmounted(() => console.log('6. onUnmounted: 已卸载'))
    onErrorCaptured((err) => { console.error('7. onErrorCaptured:', err); return false })
    onActivated(() => console.log('8. onActivated: keep-alive 激活'))
    onDeactivated(() => console.log('9. onDeactivated: keep-alive 停用'))
    return {}
  },
  template: '<div style="padding: 1rem; background: #f0f9ff;">Props count: {{ count }}</div>'
}

const App = {
  components: { LifecycleDemo },
  setup() {
    const count = ref(0)
    const show = ref(true)
    return { count, show }
  }
}

createApp(App).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <p style="color: #999; font-size: 0.85rem;">查看 console：先 Child 后 Parent</p>
  <parent-demo></parent-demo>
</div>

<script>
const { createApp, onMounted } = Vue

const ChildDemo = {
  setup() {
    onMounted(() => console.log('3. Child onMounted'))
    return {}
  },
  template: '<div style="padding: 0.5rem; background: #fef3c7;">Child 子组件</div>'
}

const ParentDemo = {
  components: { ChildDemo },
  setup() {
    onMounted(() => console.log('4. Parent onMounted（父等子挂载完）'))
    return {}
  },
  template: `
    <div style="border: 1px solid #ddd; padding: 1rem;">
      <p>Parent 父组件</p>
      <child-demo></child-demo>
    </div>
  `
}

createApp(ParentDemo).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <error-boundary>
    <buggy-component></buggy-component>
  </error-boundary>
</div>

<script>
const { createApp, ref, onErrorCaptured } = Vue

// 会出错的子组件
const BuggyComponent = {
  setup() {
    // 模拟错误：访问 undefined.value
    const data = ref(null)
    setTimeout(() => { data.value.foo = 'bar' }, 100)
    return { data }
  },
  template: '<div>{{ data.foo }}</div>'
}

// 错误边界
const ErrorBoundary = {
  components: { BuggyComponent },
  setup() {
    const error = ref(null)
    onErrorCaptured((err, instance, info) => {
      console.error('Caught:', err.message)
      console.log('Info:', info)
      error.value = err.message
      return false   // 阻止向上传播
    })
    return { error }
  },
  template: `
    <div>
      <div v-if="error" style="padding: 1rem; background: #fee; color: #c00;">
        ⚠️ Error: {{ error }}
      </div>
      <slot v-else></slot>
    </div>
  `
}

const App = { components: { ErrorBoundary } }
createApp(App).mount('#app')
</script>

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

<div id="app">
  <button
    v-for="tab in tabs" :key="tab"
    :style="{ padding: '6px 12px', margin: '2px', border: 'none', background: currentTab === tab ? '#42b883' : '#eee', color: currentTab === tab ? 'white' : '#333', cursor: 'pointer' }"
    @click="currentTab = tab"
  >{{ tab }}</button>

  <keep-alive>
    <component :is="currentTabComponent"></component>
  </keep-alive>
</div>

<script>
const { createApp, ref, computed, onActivated, onDeactivated, onMounted } = Vue

// 3 个 Tab 子组件
const Home = {
  setup() {
    onMounted(() => console.log('🏠 Home mounted'))
    onActivated(() => console.log('🏠 Home activated'))
    onDeactivated(() => console.log('🏠 Home deactivated'))
    return { counter: ref(0) }
  },
  template: `
    <div style="padding: 1rem; background: #ecfdf5;">
      <h3>Home</h3>
      <button @click="$data.counter = ($data.counter || 0) + 1">内部计数: {{ $data.counter || 0 }}</button>
      <p style="color: #999; font-size: 0.85rem;">切换到其他 Tab 再切回，计数保留</p>
    </div>
  `
}

const Profile = {
  setup() {
    onMounted(() => console.log('👤 Profile mounted'))
    onActivated(() => console.log('👤 Profile activated'))
    onDeactivated(() => console.log('👤 Profile deactivated'))
    return {}
  },
  template: '<div style="padding: 1rem; background: #eff6ff;"><h3>Profile</h3></div>'
}

const Settings = {
  setup() {
    onMounted(() => console.log('⚙️ Settings mounted'))
    onActivated(() => console.log('⚙️ Settings activated'))
    onDeactivated(() => console.log('⚙️ Settings deactivated'))
    return {}
  },
  template: '<div style="padding: 1rem; background: #fef3c7;"><h3>Settings</h3></div>'
}

const App = {
  components: { Home, Profile, Settings },
  setup() {
    const tabs = ['Home', 'Profile', 'Settings']
    const currentTab = ref('Home')
    const currentTabComponent = computed(() =>
      ({ Home, Profile, Settings })[currentTab.value]
    )
    return { tabs, currentTab, currentTabComponent }
  }
}

createApp(App).mount('#app')
</script>