给原生小程序安排上Composition API
zhuxiaoqiang · 519浏览 · 发布于2020-12-29 +关注

通过对逻辑层的封装,让原生小程序使用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,看下介绍和源码。


相关推荐

android下vulkan与opengles纹理互通

talkchan · 886浏览 · 2020-11-23 10:37:39
Android 使用RecyclerView实现轮播图

奔跑的男人 · 1912浏览 · 2019-05-09 17:11:13
微软发布新命令行工具 Windows Terminal

吴振华 · 732浏览 · 2019-05-09 17:15:04
Facebook 停止屏蔽部分区块链广告

· 619浏览 · 2019-05-09 17:20:08
加载中

0评论

评论
我爱编程,我爱工作,更爱生活
小鸟云服务器
扫码进入手机网页