逻辑复用与性能优化

项目越来越大时，有两个问题必须解决：重复逻辑怎么复用、渲染性能怎么提升。Vue3 给出的答案是"组合式函数（Composable）"，以及计算属性缓存、key、懒加载等优化手段。

抽一个 useTasks 组合式函数

把与"任务"相关的全部逻辑收进 composables/useTasks.js，任何组件调用即可获得一套独立的数据与操作：

// src/composables/useTasks.js
import { ref, computed } from 'vue'

export function useTasks() {
  const tasks = ref([])
  const doneCount = computed(() =>
    tasks.value.filter(t => t.done).length
  )
  function addTask(title) {
    tasks.value.push({ id: Date.now(), title, done: false })
  }
  function removeTask(id) {
    tasks.value = tasks.value.filter(t => t.id !== id)
  }
  function toggleTask(id) {
    const task = tasks.value.find(t => t.id === id)
    if (task) task.done = !task.done
  }
  return { tasks, doneCount, addTask, removeTask, toggleTask }
}

在组件里复用

调用一次就拿到全部能力，模板里直接用：

<script setup>
import { useTasks } from '../composables/useTasks'
const { tasks, doneCount, addTask } = useTasks()
</script>
<template>
  <button @click="addTask('随手记')">加任务</button>
  <p>已完成 {{ doneCount }} / {{ tasks.length }}</p>
</template>

效果：新增按钮、统计文案立即可用；若再做一个"回收站"页面，同样一行引入即可复用。

computed 缓存避免重复计算

方法每次渲染都执行，computed 只在依赖变化时重算并缓存结果：

// 模板里 {{ getCount() }} 每次渲染都算一遍 —— 不推荐
function getCount() { return tasks.value.filter(t => t.done).length }

// computed 依赖不变就直接用缓存 —— 推荐
const doneCount = computed(() =>
  tasks.value.filter(t => t.done).length
)

v-for 一定要写 key

key 帮助 Vue 精准复用节点，避免删除、排序时状态错乱：

<li v-for="task in showTasks" :key="task.id">
  {{ task.title }}
</li>

大组件懒加载

除路由懒加载外，非首屏必需的重组件可用 defineAsyncComponent 按需加载：

import { defineAsyncComponent } from 'vue'
const BigChart = defineAsyncComponent(() =>
  import('../components/BigChart.vue')
)

效果：BigChart 只在真正被渲染时才请求代码，首屏加载更快。

小结

组合式函数解决"复用"，computed 与 key 解决"渲染效率"，懒加载解决"体积"。逻辑清爽、页面更快之后，就可以打包部署了。