给原生小程序安排上Composition API

[lei4519]

2020-12-18

通过对逻辑层的封装，让原生小程序使用 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👍。