通過對邏輯層的封裝，讓原生小程序使用Vue3的Composotion API

index.wxml

<view>
  <view>{{count}}</view>
  <button bindtap="add">數(shù)字 +1</button>
</view>
復(fù)制代碼

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()
  }
})
復(fù)制代碼

流程圖先走一波

1. Epage函數(shù)會對傳入的options對象屬性進行遍歷，對所有的生命周期方法進行裝飾，將生命周期改造成數(shù)組結(jié)構(gòu)，并提供相關(guān)的hooks方式以調(diào)用注冊。
2. 在onLoad/created中檢查并執(zhí)行setup函數(shù)，拿到其返回值setupData。
3. 創(chuàng)建options.data對象副本（如果有的話），使用reactive將其響應(yīng)式后保存到this.data$屬性上。
4. 遍歷setupData，將其值直接賦值給this.data$，響應(yīng)式解包賦值給this.data。
5. 調(diào)用this.setData(this.data)，同步數(shù)據(jù)至渲染層。
6. 保存this.data副本至this.__oldData__。
7. 使用watch監(jiān)聽this.data$，響應(yīng)式觸發(fā)后diff this.data$與this.__oldData__。
8. 調(diào)用this.setData(diffData)，同步數(shù)據(jù)至渲染層。
9. 優(yōu)化部分：當頁面onHide時會取消響應(yīng)式監(jiān)聽，onShow時會重新監(jiān)聽并diff一次數(shù)據(jù)。

以上是核心的實現(xiàn)思路，除此之外還有全局mixins、生命周期阻塞執(zhí)行、全局生命周期控制等邏輯，具體可以去enhance-weapp，看下介紹和源碼。