「真香警告」鱼头手摸手教你在小程序里用composition-api

使用

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

wxue(options)

setup

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

import { wxue, reactive } from 'wxue'

wxue({
  setup(options) {
    const test = reactive({
      x: 1,
      y: 2,
    })

    setInterval(() => {
      test.x++
    }, 1000)

    return {
      test,
    }
  },
})
ref

api

应该有如下api

reactive
ref
unref
toRef
toRefs
computed
watchEffect
watch
各种钩子，与小程序生命周期一致

示例

import { wxue, nextTick, ref, onShow } from 'wxue'

function useAutoAdd(x) {
  const b = ref(x)
  setInterval(() => {
    b.value++
  }, 1000)
  return b
}

wxue({
  data: {},
  setup(options) {
    const b = useAutoAdd(2)

    onShow(() => {
      console.log('onShow form hooks', this)
    })

    function getXx() {
      console.log(this, 'getXx')
    }

    return {
      c: b,
      getXx,
      test,
    }
  },
  onLoad: function (options) {
    setTimeout(() => {
      this.test()
      console.log(this.data.b)
    }, 5000)
    this.getXx()
  },
  test: function () {
    nextTick(() => {
      console.log(this.data.a.b)
    })
    this.data['a.b'] = 111
    this.data['a.c'] = 111
  },
})

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

返回对象的响应数据。

import { wxue, reactive } from 'wxue'

wxue({
  setup(options) {
    const test = reactive({
      x: 1,
      y: 2,
    })

    setInterval(() => {
      test.x++
    }, 1000)

    return {
      test,
    }
  },
})

ref

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

import { wxue, ref } from 'wxue'

wxue({
  setup(options) {
    const x = ref(1)

    setInterval(() => {
      x.value++
    }, 1000)

    return {
      x,
    }
  },
})

unref

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

toRef

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

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

toRefs

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

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

computed

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

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

watchEffect

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

const count = ref(0)
const stop = watchEffect(() => console.log(count.value))
setTimeout(() => {
  count.value++
  if (count.value === 100) {
    stop()
  }
}, 1000)

watch

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

const count = ref(0)
const state = reactive({ count: 0 })
const stop = watch(ref, (count, prevCount) => {
  /* ... */
})
const stop2 = watch(
  () => state.count,
  (count, prevCount) => {
    /* ... */
  }
)
stop()
stop2()

hooks

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

import { wxue, onShow } from 'wxue'

wxue({
  setup(options) {
    onShow(() => {
      console.log('onShow form hooks')
    })
  },
})

setData(page, data)

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

nextTick()

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

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

其他

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

最后

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