Vue3 学习总结：核心知识体系回顾

<script setup lang="ts">
import { ref, reactive } from 'vue'

// ref 包装基本类型：歌曲播放量计数
const playCount = ref(1024)
// reactive 包装对象：一首歌曲的完整档案
const song = reactive({
  title: '星屑协奏曲',
  singer: '初霜',
  producer: '星尘P',
})

function like() {
  playCount.value++ // ref 在脚本中必须通过 .value 读写
  song.singer = '初霜 Ver.2' // reactive 直接改属性即可触发更新
}
</script>

<template>
  <button @click="like">《{{ song.title }}》已播放 {{ playCount }} 次</button>
</template>

// composables/useFanClub.ts：粉丝团加入逻辑，任意歌姬主页可复用
import { ref, computed } from 'vue'

export function useFanClub(singerId: string) {
  const joined = ref(false) // 是否已加入粉丝团
  const fans = ref(8800) // 当前成员数

  // 派生状态：成员满一万前可解锁专属应援色
  const canUseThemeColor = computed(() => joined.value || fans.value < 10000)

  async function join() {
    joined.value = true
    fans.value++ // 实际项目中此处应先调用接口再更新本地状态
  }

  return { joined, fans, canUseThemeColor, join }
}

<!-- components/SongCard.vue：歌曲卡片，props 进、emits 出 -->
<script setup lang="ts">
interface Props {
  title: string // 歌曲名
  singer: string // 演唱歌姬
  themeColor: string // 应援色
}
const props = defineProps<Props>()
// 事件签名：向父组件上报"播放"动作并携带歌名
const emit = defineEmits<{ play: [title: string] }>()
</script>

<template>
  <article :style="{ borderLeft: `4px solid ${props.themeColor}` }">
    <h3>{{ props.title }}</h3>
    <p>演唱：{{ props.singer }}</p>
    <button @click="emit('play', props.title)">播放</button>
  </article>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'

const keyword = ref('')
const concerts = ref([
  { city: '上海', date: '2026-10-01' },
  { city: '北京', date: '2026-11-11' },
])

// computed：由搜索词派生过滤结果，依赖不变时直接复用缓存
const matched = computed(() =>
  concerts.value.filter((c) => c.city.includes(keyword.value))
)

// watch：关键词变化后上报埋点，属于副作用而非派生值
watch(keyword, (val, old) => {
  console.log(`演唱会搜索词从「${old}」变为「${val}」`)
})
</script>

// stores/fanClub.ts：粉丝团全局状态
import { defineStore } from 'pinia'

export const useFanClubStore = defineStore('fanClub', {
  state: () => ({
    clubName: '星尘后援会',
    members: 8800,
    themeColor: '#7C6BFF', // 粉丝团应援色
  }),
  getters: {
    // 派生状态：是否已达成员上限
    isFull: (state) => state.members >= 10000,
  },
  actions: {
    enroll() {
      this.members += 1 // actions 中可直接读写 this 上的状态
    },
  },
})

// router/index.ts：虚拟歌手音乐平台的页面级路由
import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', name: 'home', component: () => import('../views/Home.vue') },
    // 动态路由：/singers/42 对应歌姬主页
    {
      path: '/singers/:id',
      name: 'singer',
      component: () => import('../views/SingerDetail.vue'),
    },
    {
      path: '/concerts',
      name: 'concerts',
      component: () => import('../views/ConcertList.vue'),
    },
  ],
})

export default router

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

// 演唱会开场倒计时：挂载后启动定时器，卸载前必须清理
const secondsLeft = ref(600)
let timer: number | undefined

onMounted(() => {
  timer = window.setInterval(() => {
    secondsLeft.value -= 1
  }, 1000)
})

onUnmounted(() => {
  if (timer !== undefined) window.clearInterval(timer)
})
</script>

<template>
  <p>距离开唱还有 {{ Math.max(secondsLeft, 0) }} 秒</p>
</template>

<!-- 错误：模板已自动解包 -->
<p>{{ playCount.value }}</p>

<!-- 修正：直接使用变量名 -->
<p>{{ playCount }}</p>

// 错误：解构后得到普通值，修改不再触发更新
const { title, singer } = song

// 修正一：用 toRefs 保持响应性
const { title, singer } = toRefs(song)
// 修正二：Pinia 场景使用 storeToRefs(store)

<!-- 错误：index 随列表变化而变化 -->
<SongCard v-for="(s, i) in songs" :key="i" :title="s.title" />

<!-- 修正：使用数据中稳定的唯一标识 -->
<SongCard v-for="s in songs" :key="s.id" :title="s.title" />

// 现象：传整个 reactive 对象时，newVal 与 oldVal 指向同一引用
watch(song, (nv, ov) => console.log(nv === ov)) // true

// 修正：改为监听具体属性 getter，或开启 deep 并按字段处理
watch(() => song.singer, (nv, ov) => console.log(ov, '->', nv))

// 错误：切页后定时器仍在跑，造成内存泄漏
onMounted(() => {
  window.setInterval(tick, 1000)
})

// 修正：保存句柄并在 onUnmounted 中清除
let timer: number
onMounted(() => {
  timer = window.setInterval(tick, 1000)
})
onUnmounted(() => window.clearInterval(timer))

// 错误：单向数据流被破坏，Vue 会在开发期发出警告
function rename() {
  props.title = '新歌名'
}

// 修正：通过 emit 通知父组件，由数据持有方修改
const emit = defineEmits<{ rename: [title: string] }>()
function rename() {
  emit('rename', '新歌名')
}

<!-- 错误：频繁切换导致组件反复挂载，内部状态也被重置 -->
<ThemePanel v-if="activeTab === 'theme'" />

<!-- 修正：高频切换用 v-show，只切换 display，组件保持挂载 -->
<ThemePanel v-show="activeTab === 'theme'" />

const fanClubStore = useFanClubStore()

// 错误：直接解构丢失响应性，界面不再随状态更新
const { members, themeColor } = fanClubStore

// 修正：用 storeToRefs 解包响应式字段，方法保持直接解构
const { members, themeColor } = storeToRefs(fanClubStore)