給原生小程序安排上Composition API

經過對邏輯層的封裝，讓原生小程序使用Vue3的Composotion 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👍。