第3章 Vue.js快速精要

大家好，欢迎来到IT知识分享网。

3.1 组合式API与选项式API对比实践

架构差异对比

uni-app开发建议

// 选项式API适合简单页面 export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } } } // 组合式API适合复杂模块 import { ref, onMounted } from 'vue' export default { setup() { const count = ref(0) const increment = () => count.value++ onMounted(() => { console.log('组件挂载完成') }) return { count, increment } } }

混合使用策略

1. 业务逻辑使用setup() + Composition API
2. 页面生命周期管理使用Options API
3. 通过provide/inject实现跨组件逻辑复用

3.2 响应式系统原理与性能优化

核心原理剖析

// Proxy响应式原理模拟 function reactive(obj) { return new Proxy(obj, { get(target, key) { track(target, key) return Reflect.get(target, key) }, set(target, key, value) { trigger(target, key) return Reflect.set(target, key, value) } }) }

性能优化方案

// 1. 冻结非响应式数据 Object.freeze(largeData) // 2. 合理使用shallowRef const heavyObj = shallowRef({ ... }) // 3. 计算属性缓存策略 const filteredList = computed(() => { return list.value.filter(item => item.active) }) // 4. 虚拟滚动优化 <scroll-view :virtual="true" :size="20">

内存泄漏检测

// Chrome Memory面板操作流程 1. 录制堆快照 → 强制GC → 对比前后差异 2. 排查Detached DOM节点 3. 检查未被清理的Event Listeners

3.3 自定义指令与混入高级技巧

实战：权限验证指令

// directives/permission.js export default { mounted(el, binding) { const hasPermission = checkAuth(binding.value) if (!hasPermission) { el.parentNode?.removeChild(el) } } } // 使用案例 <button v-permission="'admin'">管理按钮</button>

混入生命周期合并策略

// mixins/logger.js export default { created() { console.log('混入生命周期触发') }, methods: { trackEvent(name) { uni.request({ url: '/log', data: { event: name } }) } } } // 组件使用 import logger from '@/mixins/logger' export default { mixins: [logger], created() { this.trackEvent('组件创建') } }

多端适配指令

// 微信小程序专用指令 const platformDirective = { //... } export default { install(app) { if (uni.getSystemInfoSync().platform === 'mp-weixin') { app.directive('wx-special', platformDirective) } } }

3.4 Vuex状态管理模式深度解析

模块化架构设计

store/ ├── index.js ├── modules/ │ ├── user.js │ └── cart.js └── plugins/ └── persistence.js

持久化存储方案

// plugins/persistence.js export default store => { // 初始化时读取存储 const savedState = uni.getStorageSync('vuex_state') if (savedState) store.replaceState(JSON.parse(savedState)) // 订阅mutation自动保存 store.subscribe((mutation, state) => { uni.setStorageSync('vuex_state', JSON.stringify(state)) }) }

性能优化实践

// 避免大型状态树 const store = new Vuex.Store({ strict: process.env.NODE_ENV !== 'production', // 生产环境关闭严格模式 modules: { user: { ... }, // 高频访问模块 logs: { // 低频模块启用命名空间 namespaced: true, state: { ... } } } })

与Pinia对比选型

本章核心技术点

1. 组合式API提升代码可维护性30%+
2. 响应式优化策略减少内存占用40%
3. 自定义指令实现跨平台功能抽象
4. Vuex模块化设计支撑百万级DAU应用