微信小程序体验composition-api（类似vue3）

微信小程序composition-api用该是什么样子？

使用

使用起来应该像是这个样子

wxue(options)

setup

配置应该是包含一个setup选项是一个函数，返回的函数可以this.xxx调用，返回的数据可以this.data.xxx用到，如下

1import { wxue, reactive } from 'wxue'
2
3wxue({
4  setup(options) {
5    const test = reactive({
6      x: 1,
7      y: 2,
8    })
9
10    setInterval(() => {
11      test.x++
12    }, 1000)
13
14    return {
15      test,
16    }
17  },
18})
19ref

api

应该有如下api

• reactive

• ref

• unref

• toRef

• toRefs

• computed

• watchEffect

• watch

• 各种钩子，与小程序生命周期一致

示例

1import { wxue, nextTick, ref, onShow } from 'wxue'
2
3function useAutoAdd(x) {
4  const b = ref(x)
5  setInterval(() => {
6    b.value++
7  }, 1000)
8  return b
9}
10
11wxue({
12  data: {},
13  setup(options) {
14    const b = useAutoAdd(2)
15
16    onShow(() => {
17      console.log('onShow form hooks', this)
18    })
19
20    function getXx() {
21      console.log(this, 'getXx')
22    }
23
24    return {
25      c: b,
26      getXx,
27      test,
28    }
29  },
30  onLoad: function (options) {
31    setTimeout(() => {
32      this.test()
33      console.log(this.data.b)
34    }, 5000)
35    this.getXx()
36  },
37  test: function () {
38    nextTick(() => {
39      console.log(this.data.a.b)
40    })
41    this.data['a.b'] = 111
42    this.data['a.c'] = 111
43  },
44})

wxue

跟 vue 的 composition-api 类似，小程序端的逻辑复用的解决方案。

介绍

由于参照vue，暂且叫他wxue吧。提供了vue的composition-api类似的用法。wxue源码 跪求star~

安装

npm i wxue -S

wxue

wxue(options)

options中需要配置setup，并且setup是一个函数

setup

返回一个对象，可包含对象或者是函数，函数将会挂载到this中，对象将挂载到data中

reactive

返回对象的响应数据。

1import { wxue, reactive } from 'wxue'
2
3wxue({
4  setup(options) {
5    const test = reactive({
6      x: 1,
7      y: 2,
8    })
9
10    setInterval(() => {
11      test.x++
12    }, 1000)
13
14    return {
15      test,
16    }
17  },
18})

ref

接受一个内部值并返回一个反应性且可变的ref对象。ref对象具有.value指向内部值的单个属性。

1import { wxue, ref } from 'wxue'
2
3wxue({
4  setup(options) {
5    const x = ref(1)
6
7    setInterval(() => {
8      x.value++
9    }, 1000)
10
11    return {
12      x,
13    }
14  },
15})

unref

如果参数是 ref，则返回内部值，否则返回参数本身。

toRef

可用于 ref 在源反应对象上为属性创建

1const test = reactive({
2  x: 1,
3  y: 2,
4})
5const x = toRef(test, 'x')
6return { x }

toRefs

将反应对象转换为普通对象，其中所得对象的每个属性都 ref 指向原始对象的相应属性,可用于解构

1const test = reactive({
2  x: 1,
3  y: 2,
4})
5const { x } = toRefs(test)
6return { x }

computed

计算属性 返回的值返回一个不变的反应性 ref 对象。

1const computedX = computed(() => x.value + 1)
2return { computedX }

watchEffect

它会在反应性地跟踪其依赖关系时立即运行一个函数，并在依赖关系发生更改时重新运行它。stop 停止监听

1const count = ref(0)
2const stop = watchEffect(() => console.log(count.value))
3setTimeout(() => {
4  count.value++
5  if (count.value === 100) {
6    stop()
7  }
8}, 1000)

watch

观察者数据源可以是返回值的 getter 函数，也可以直接是 ref, stop 停止监听

1const count = ref(0)
2const state = reactive({ count: 0 })
3const stop = watch(ref, (count, prevCount) => {
4  /* ... */
5})
6const stop2 = watch(
7  () => state.count,
8  (count, prevCount) => {
9    /* ... */
10  }
11)
12stop()
13stop2()

hooks

支持小程序的所有生命周期 onLoad,onReady,onShow,onHide,onUnload,onPullDownRefresh,onReachBottom,onShareAppMessage

1import { wxue, onShow } from 'wxue'
2
3wxue({
4  setup(options) {
5    onShow(() => {
6      console.log('onShow form hooks')
7    })
8  },
9})

setData(page, data)

优化的setData，多次调用将合并成一次执行

nextTick()

setData是异步的，在setData执行后完成后执行的回调nextTick

1// 1 返回Promise
2await nextTick()
3// 2 执行回调
4nextTick(() => {})

其他

对this.data的 set 进行了劫持，会调用setData

最后

欢迎大家提出宝贵的意见，如有错误还望评论区不要客气，大家共同学习，一起进步。github: https://github.com/kouchao/wxue，跪求star~

本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/Zp0NiqYFKcrqTn7A3kz92Q，如有侵权，请联系删除。