第 5 章 · 生命周期与组合式函数

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

onBeforeMount(() => {
  console.log('挂载前：DOM 还没生成，拿不到元素')
})

onMounted(() => {
  console.log('★ 挂载完成：DOM 已就绪，可以发请求、操作元素')
})

onBeforeUpdate(() => {
  console.log('数据变了，但 DOM 还是旧的')
})

onUpdated(() => {
  console.log('DOM 更新完成，此时页面和最新数据是一致的')
})

onBeforeUnmount(() => {
  console.log('即将卸载：这是最后能访问到 DOM 的机会')
})

onUnmounted(() => {
  console.log('★ 已卸载：清定时器、解绑事件监听')
})
</script>

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

const list = ref([])
const total = ref(0)

onMounted(async () => {
  // 只在挂载后执行：此刻 DOM 已就绪，数据回来能立刻渲染
  const res = await fetch('http://127.0.0.1:5000/api/article/list?page=1&page_size=10')
  const json = await res.json()

  if (json.code === 200) {
    list.value = json.data.list          // 注意：这里要写 .value
    total.value = json.data.total
  }
  console.log('列表拿到了', list.value.length, '条，共', total.value, '条')
})
</script>

<template>
  <ul>
    <li v-for="item in list" :key="item.id">{{ item.title }} —— {{ item.author }}</li>
  </ul>
</template>

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

const seconds = ref(0)
let timer = null

function onResize() {
  console.log('窗口宽度变了：', window.innerWidth)
}

onMounted(() => {
  timer = setInterval(() => {
    seconds.value++
  }, 1000)
  window.addEventListener('resize', onResize)
})

onUpdated(() => {
  // 只在里面「读」数据，做日志 / 上报；改 DOM 之外的事都别干
  console.log('DOM 更新完成，当前 seconds =', seconds.value)
})

onUnmounted(() => {
  // 起了什么，就回收什么
  clearInterval(timer)
  timer = null
  window.removeEventListener('resize', onResize)
  console.log('组件已卸载，定时器与监听均已清理')
})
</script>

<template>
  <p>你在本页停留了 {{ seconds }} 秒</p>
</template>

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

// ref 可以装基本类型，也可以装对象 / 数组
const count = ref(0)
const user = ref({ nickname: '青莲居士' })

function add() {
  count.value++                  // script 里：必须 .value
  user.value.nickname = '李白'    // 对象内部属性也要经过 .value 才拿到代理
}
</script>

<template>
  <!-- 模板里：自动解包，直接写名字，千万别写 count.value -->
  <p>{{ count }} 次 </p>
  <p>{{ user.nickname }}</p>
  <button @click="add">加一</button>
</template>

<script setup>
import { reactive, toRefs } from 'vue'

// reactive 只能装对象（包含数组），不能装数字 / 字符串
const state = reactive({
  count: 0,
  keyword: ''
})

function add() {
  state.count++            // 不用 .value，直接改属性
}

// ⚠️ 直接解构会「丢掉响应性」：解出来的是普通变量，改它页面不动
const { count } = state

// ✅ 想解构又要保响应性，用 toRefs 转成一组 ref
const { keyword } = toRefs(state)
</script>

<template>
  <p>{{ state.count }} 次</p>
  <input v-model="state.keyword" placeholder="搜索作品">
</template>

<!-- src/views/ArticleListView.vue -->
<script setup>
import { ref, onMounted } from 'vue'

const list = ref([])
const loading = ref(false)
const error = ref('')

onMounted(async () => {
  loading.value = true
  try {
    const res = await fetch('http://127.0.0.1:5000/api/article/list?page=1&page_size=10')
    const json = await res.json()
    if (json.code === 200) list.value = json.data.list
    else error.value = json.msg
  } catch (e) {
    error.value = '网络异常，请稍后再试'
  } finally {
    loading.value = false
  }
})
</script>

<!-- src/views/FavoriteView.vue -->
<script setup>
import { ref, onMounted } from 'vue'

const list = ref([])
const loading = ref(false)
const error = ref('')

onMounted(async () => {
  loading.value = true
  try {
    // 只有这一行不一样
    const res = await fetch('http://127.0.0.1:5000/api/favorite/list?page=1&page_size=10')
    const json = await res.json()
    if (json.code === 200) list.value = json.data.list
    else error.value = json.msg
  } catch (e) {
    error.value = '网络异常，请稍后再试'
  } finally {
    loading.value = false
  }
})
</script>

import { ref } from 'vue'

const BASE_URL = 'http://127.0.0.1:5000/api'

/**
 * 作品列表的加载逻辑：内部管理 loading / list / error，
 * 并暴露一个 fetchArticles() 让组件决定「什么时候加载、带什么条件」。
 */
export function useArticleList() {
  const list = ref([])
  const total = ref(0)
  const loading = ref(false)
  const error = ref('')

  async function fetchArticles(params = {}) {
    loading.value = true
    error.value = ''

    try {
      const query = new URLSearchParams({ page: 1, page_size: 10, ...params })
      const res = await fetch(`${BASE_URL}/article/list?${query}`)
      const json = await res.json()

      if (json.code === 200) {
        list.value = json.data.list
        total.value = json.data.total
      } else {
        // 后端返回的业务错误：msg 可以直接展示给用户
        error.value = json.msg
      }
    } catch (e) {
      error.value = '网络异常，请稍后再试'
    } finally {
      loading.value = false
    }
  }

  // 返回一组 ref：调用方解构出来的仍然是响应式的
  return { list, total, loading, error, fetchArticles }
}

<script setup>
import { onMounted } from 'vue'
import { useArticleList } from '@/composables/useArticleList'

// 一行拿到全套状态和方法（<script setup> 里解构 ref 不会丢响应性）
const { list, total, loading, error, fetchArticles } = useArticleList()

// 什么时候加载、按什么条件加载，由页面自己决定
onMounted(() => fetchArticles({ order_by: 'hot' }))
</script>

<template>
  <p v-if="loading">加载中……</p>
  <p v-else-if="error" class="err">{{ error }}</p>
  <p v-else-if="list.length === 0">暂无作品</p>
  <ul v-else>
    <li v-for="item in list" :key="item.id">{{ item.title }} —— {{ item.author }}</li>
  </ul>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useArticleList } from '@/composables/useArticleList'

// ① 一行接入列表逻辑
const { list, total, loading, error, fetchArticles } = useArticleList()

// 当前选中的分类：默认「全部」
const currentCategory = ref(null)

// ② 进页面就按当前分类加载
onMounted(() => fetchArticles({ category_id: currentCategory.value }))

// ③ 切分类时重新加载（fetchArticles 是组合式函数给的，直接复用）
function switchCategory(categoryId) {
  currentCategory.value = categoryId
  fetchArticles({ category_id: categoryId })
}
</script>

<template>
  <div class="article-list">
    <h2>作品列表<span class="meta">共 {{ total }} 篇</span></h2>

    <!-- 分类切换：用第 4 章的 v-for + :key -->
    <div class="tabs">
      <button
        v-for="cat in [{ id: null, name: '全部' }, { id: 1, name: '唐诗' }, { id: 2, name: '宋词' }]"
        :key="cat.id"
        @click="switchCategory(cat.id)"
      >{{ cat.name }}</button>
    </div>

    <!-- 第 4 章的四态渲染，一行都不用改 -->
    <p v-if="loading">加载中……</p>
    <p v-else-if="error" class="err">{{ error }}</p>
    <p v-else-if="list.length === 0">这个分类下暂无作品</p>
    <ul v-else>
      <li v-for="item in list" :key="item.id">
        <span v-if="item.isRecommend" class="badge">推荐</span>
        <b>{{ item.title }}</b> —— {{ item.author }} · {{ item.dynasty }}
      </li>
    </ul>
  </div>
</template>

hiwen-web/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── main.js                 # 入口：createApp(App).mount('#app')
    ├── App.vue                 # 根组件
    ├── api/                    # 接口封装（第 9 章 axios 会专门讲）
    ├── composables/            # ★ 组合式函数：有状态的逻辑放这里
    │   ├── useArticleList.js
    │   ├── useCommentList.js
    │   └── useUser.js
    ├── components/             # 通用组件：跨页面复用的 UI（第 6 章）
    │   ├── ArticleCard.vue
    │   └── ArticleList.vue
    ├── views/                  # 页面级组件：一个路由对应一个（第 7 章）
    │   ├── ArticleListView.vue
    │   └── ArticleDetailView.vue
    ├── router/                 # 路由配置（第 7 章）
    ├── stores/                 # 全局状态（第 8 章 Pinia）
    └── utils/                  # 无状态工具函数：日期格式化、防抖等