第3章 Vue.js快速精要（vue.js实战）

boyanx5个月前 (07-29)技术教程25

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 }
  }
}

混合使用策略

业务逻辑使用setup() + Composition API
页面生命周期管理使用Options API
通过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对比选型

特性	Vuex	Pinia
类型支持	需额外类型声明	原生TS支持
模块化	需要手动划分	自动代码分割
体积	23KB	1KB
学习曲线	较高	简单
适用场景	大型复杂应用	中小型项目