给原生小程序安排上Composition API

使用示例

index.wxml

<view>
  <view>{{count}}</view>
  <button bindtap="add">数字 +1</button>
</view>

index.js

import {Epage, ref, onShowHooks} from 'enhance-weapp'

function useCount() {
  const count = ref(0)
  const add = () => {
    count.value++
  }
  onShowHooks(() => {
    console.log('我是useCount')
  })
  return {
    count,
    add
  }
}


Epage({
  setup() {
    onShowHooks(() => {
      console.log('我是setup')
    })
    return useCount()
  }
})

原理简述

流程图先走一波

1. Epage函数会对传入的options对象属性进行遍历，对所有的生命周期方法进行装饰，将生命周期改造成数组结构，并提供相关的hooks方式以调用注册。
2. 在onLoad/created中检查并执行setup函数，拿到其返回值setupData。
3. 创建options.data对象副本（如果有的话），使用reactive将其响应式后保存到this.data$属性上。
4. 遍历setupData，将其值直接赋值给this.data$，响应式解包赋值给this.data。
5. 调用this.setData(this.data)，同步数据至渲染层。
6. 保存this.data副本至this.__oldData__。
7. 使用watch监听this.data$，响应式触发后diff this.data$与this.__oldData__。
8. 调用this.setData(diffData)，同步数据至渲染层。
9. 优化部分：当页面onHide时会取消响应式监听，onShow时会重新监听并diff一次数据。

以上是核心的实现思路，除此之外还有全局mixins、生命周期阻塞执行、全局生命周期控制等逻辑，具体可以去enhance-weapp，看下介绍和源码。

如果本篇内容对你有帮助，欢迎点赞star?。