给原生小程序安排上Composition API
zhuxiaoqiang · 634浏览 · 发布于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() } })
原理简述
流程图先走一波
Epage函数会对传入的options对象属性进行遍历,对所有的生命周期方法进行装饰,将生命周期改造成数组结构,并提供相关的hooks方式以调用注册。
在onLoad/created中检查并执行setup函数,拿到其返回值setupData。
创建options.data对象副本(如果有的话),使用reactive将其响应式后保存到this.data$属性上。
遍历setupData,将其值直接赋值给this.data$,响应式解包赋值给this.data。
调用this.setData(this.data),同步数据至渲染层。
保存this.data副本至this.__oldData__。
使用watch监听this.data$,响应式触发后diff this.data$与this.__oldData__。
调用this.setData(diffData),同步数据至渲染层。
优化部分:当页面onHide时会取消响应式监听,onShow时会重新监听并diff一次数据。
以上是核心的实现思路,除此之外还有全局mixins、生命周期阻塞执行、全局生命周期控制等逻辑,具体可以去enhance-weapp,看下介绍和源码。
相关推荐
android下vulkan与opengles纹理互通
talkchan · 1175浏览 · 2020-11-23 10:37:39
Android 使用RecyclerView实现轮播图
奔跑的男人 · 2175浏览 · 2019-05-09 17:11:13
微软发布新命令行工具 Windows Terminal
吴振华 · 869浏览 · 2019-05-09 17:15:04
在华为写了十几年代码,我为什么还没有被拿去“祭天”
追忆似水年华 · 1201浏览 · 2019-05-09 17:22:20
android 通过修改图片像素实现CircleImageView
吴振华 · 1127浏览 · 2019-05-09 22:26:56
我爱编程,我爱工作,更爱生活
分类专栏
最新发布
最热排行
0评论