企业官网建设流程全解析

## 一、背景介绍在 Vue 2.x 时代我们使用 Options API 来组织代码但随着项目规模增大逻辑复用和代码组织变得越来越困难。Vue 3 引入的 Composition API 彻底改变了这一局面让我们能够更优雅地组织组件逻辑。本文将带你深入理解 Composition API 的核心概念并通过实战案例构建一个高性能的响应式数据管理系统。## 二、核心概念### 2.1 响应式系统基础Vue 3 的响应式系统基于 Proxy 实现相比 Vue 2 的 Object.defineProperty它具有以下优势- 可以检测属性的添加和删除- 可以检测数组索引的变化- 可以检测对象属性值的变化javascriptimport { reactive, ref, computed, watch } from vue// reactive 用于对象返回响应式代理const state reactive({count: 0,user: {name: 张三,age: 25}})// ref 用于基本类型通过 .value 访问const count ref(0)count.value// computed 创建计算属性const doubleCount computed(() count.value * 2)// watch 监听变化watch(() state.count, (newVal, oldVal) {console.log(count 从 ${oldVal} 变为 ${newVal})})### 2.2 setup 函数setup 是 Composition API 的入口点在组件创建之前执行javascriptexport default {setup() {const count ref(0)const increment () {count.value}// 返回的内容可在模板中使用return {count,increment}}}## 三、实战构建数据管理系统### 3.1 系统架构设计我们将构建一个包含以下功能的数据管理系统1. 数据状态管理2. 异步数据加载3. 数据缓存策略4. 错误处理机制### 3.2 核心代码实现javascript// useDataManager.jsimport { reactive, ref, computed, watch, onMounted, onUnmounted } from vueexport function useDataManager(options {}) {const {apiUrl,cacheKey,cacheTimeout 5 * 60 * 1000 // 5分钟缓存} options// 状态定义const state reactive({data: null,loading: false,error: null,lastFetchTime: null})// 缓存管理const cache ref(null)// 计算属性是否需要刷新const needsRefresh computed(() {if (!state.lastFetchTime) return truereturn Date.now() - state.lastFetchTime cacheTimeout})// 数据获取方法const fetchData async (forceRefresh false) {// 检查缓存if (!forceRefresh cache.value !needsRefresh.value) {state.data cache.valuereturn}state.loading truestate.error nulltry {const response await fetch(apiUrl)const result await response.json()state.data resultcache.value resultstate.lastFetchTime Date.now()// 存储到 localStoragelocalStorage.setItem(cacheKey, JSON.stringify({data: result,timestamp: Date.now()}))} catch (err) {state.error err.messageconsole.error(数据获取失败:, err)} finally {state.loading false}}// 数据更新方法const updateData async (newData) {try {const response await fetch(apiUrl, {method: PUT,headers: { Content-Type: application/json },body: JSON.stringify(newData)})const result await response.json()state.data resultcache.value result} catch (err) {state.error err.message}}// 初始化时加载缓存onMounted(() {const cached localStorage.getItem(cacheKey)if (cached) {const { data, timestamp } JSON.parse(cached)if (Date.now() - timestamp cacheTimeout) {cache.value datastate.data datastate.lastFetchTime timestamp}}})// 清理缓存const clearCache () {cache.value nulllocalStorage.removeItem(cacheKey)state.lastFetchTime null}return {state,fetchData,updateData,clearCache,needsRefresh}}### 3.3 在组件中使用vuetemplatediv classdata-managerdiv v-ifstate.loading classloading加载中.../divdiv v-else-ifstate.error classerror错误: {{ state.error }}/divdiv v-else classcontenth2数据列表/h2ulli v-foritem in state.data :keyitem.id{{ item.name }}/li/ulbutton clickfetchData(true)刷新数据/buttonbutton clickclearCache清除缓存/button/div/div/templatescriptimport { useDataManager } from ./useDataManagerexport default {setup() {const { state, fetchData, clearCache } useDataManager({apiUrl: /api/data,cacheKey: my-data-cache,cacheTimeout: 10 * 60 * 1000})// 初始加载fetchData()return {state,fetchData,clearCache}}}/script## 四、性能优化技巧### 4.1 使用 shallowRef 减少响应式开销对于大型数据结构可以使用 shallowRef 避免深层响应式转换javascriptimport { shallowRef } from vueconst largeData shallowRef([])// 更新时触发响应largeData.value newDataArray### 4.2 使用 markRaw 标记不需要响应式的对象javascriptimport { markRaw, reactive } from vueconst state reactive({// 这个对象不会转换为响应式config: markRaw({staticConfig: value})})### 4.3 合理使用 computed 缓存computed 具有缓存特性只有依赖变化时才会重新计算javascriptconst expensiveValue computed(() {// 复杂计算只有依赖变化时才执行return state.list.filter(item item.active).map(item item.value).reduce((sum, val) sum val, 0)})## 五、总结Vue 3 Composition API 为我们提供了更灵活的代码组织方式1. **逻辑复用**通过自定义 Hook 实现逻辑复用2. **代码组织**按功能组织代码而非按选项类型3. **TypeScript 支持**更好的类型推断4. **Tree-shaking**未使用的 API 不会打包掌握 Composition API 是 Vue 3 开发的必备技能希望本文能帮助你更好地理解和应用它---**相关推荐**- Vue 3 官方文档https://vuejs.org/- Vue 3 迁移指南https://v3-migration.vuejs.org/