Mpx框架组合式API深度解析与实践指南

原创于 2025-06-10 09:20:21 发布

· 324 阅读

3 ·

版权

Mpx框架组合式API深度解析与实践指南

mpx Mpx，一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架项目地址: https://gitcode.com/gh_mirrors/mp/mpx

什么是Mpx框架的组合式API

组合式API是Mpx框架借鉴Vue3思想实现的重要特性，它通过setup函数和一系列响应式API，为小程序开发提供了更灵活、更强大的代码组织方式。与传统的选项式API相比，组合式API具有以下显著优势：

逻辑复用更优雅：通过函数封装实现逻辑复用，避免了mixins带来的命名冲突和来源不清晰等问题
代码组织更灵活：不再受限于选项式API的固定结构，开发者可以自由组织代码
类型推导更友好：基于变量和函数的实现方式天然支持TypeScript类型推导

组合式API核心概念

setup函数基础

setup函数是组合式API的入口，在Mpx中可以通过createPage和createComponent声明：

import { createComponent } from '@mpxjs/core'

createComponent({
  properties: {
    user: String
  },
  setup(props) {
    // 在这里编写逻辑代码
    return {
      // 暴露给模板的数据和方法
    }
  }
})

响应式变量管理

Mpx提供了ref和reactive等API来创建响应式数据：

import { ref, reactive } from '@mpxjs/core'

setup() {
  const count = ref(0)  // 基本类型使用ref
  const user = reactive({  // 对象类型使用reactive
    name: '张三',
    age: 25
  })
  
  return { count, user }
}

生命周期钩子

Mpx提供了统一的生命周期钩子函数，以on开头：

import { onMounted, onUpdated } from '@mpxjs/core'

setup() {
  onMounted(() => {
    console.log('组件已挂载')
  })
  
  onUpdated(() => {
    console.log('组件已更新')
  })
}

计算属性和侦听器

import { computed, watch } from '@mpxjs/core'

setup(props) {
  const doubleCount = computed(() => count.value * 2)
  
  watch(
    () => props.user,
    (newVal, oldVal) => {
      console.log('user属性变化了', newVal)
    }
  )
  
  return { doubleCount }
}

组合式API高级用法

逻辑复用实践

将相关逻辑提取到独立的函数中，实现更好的复用：

// useCounter.js
import { ref } from '@mpxjs/core'

export function useCounter(initialValue = 0) {
  const count = ref(initialValue)
  
  const increment = () => count.value++
  const decrement = () => count.value--
  
  return { count, increment, decrement }
}

// 组件中使用
import { useCounter } from './useCounter'

setup() {
  const { count, increment } = useCounter(10)
  
  return { count, increment }
}

模板引用处理

Mpx中通过wx:ref和context.refs实现模板引用：

<template>
  <view wx:ref="myView">内容</view>
</template>

<script>
setup(props, { refs }) {
  onMounted(() => {
    console.log(refs.myView) // 获取模板引用
  })
}
</script>

副作用页面事件处理

对于有副作用的页面事件，Mpx提供了特殊处理：

import { onPageScroll, onShareAppMessage } from '@mpxjs/core'

setup() {
  onPageScroll(({ scrollTop }) => {
    console.log('页面滚动位置', scrollTop)
  })
  
  onShareAppMessage(() => ({
    title: '分享标题',
    path: '/pages/index'
  }))
}