「真香警告」魚頭手摸手教你在小程序里用composition-api
使用
使用起來應(yīng)該像是這個(gè)樣子
wxue(options)
setup
配置應(yīng)該是包含一個(gè)setup選項(xiàng)是一個(gè)函數(shù)，返回的函數(shù)可以this.xxx調(diào)用，返回的數(shù)據(jù)可以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
應(yīng)該有如下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 類似，小程序端的邏輯復(fù)用的解決方案。
介紹
由于參照vue，暫且叫他wxue吧。提供了vue的composition-api類似的用法。wxue源碼 跪求star~
安裝
npm?i?wxue?-S
wxue
wxue(options)
options中需要配置setup，并且setup是一個(gè)函數(shù)
setup
返回一個(gè)對(duì)象，可包含對(duì)象或者是函數(shù)，函數(shù)將會(huì)掛載到this中，對(duì)象將掛載到data中
reactive
返回對(duì)象的響應(yīng)數(shù)據(jù)。
import?{?wxue,?reactive?}?from?'wxue'
wxue({
??setup(options)?{
????const?test?=?reactive({
??????x:?1,
??????y:?2,
????})
????setInterval(()?=>?{
??????test.x++
????},?1000)
????return?{
??????test,
????}
??},
})
ref
接受一個(gè)內(nèi)部值并返回一個(gè)反應(yīng)性且可變的ref對(duì)象。ref對(duì)象具有.value指向內(nèi)部值的單個(gè)屬性。
import?{?wxue,?ref?}?from?'wxue'
wxue({
??setup(options)?{
????const?x?=?ref(1)
????setInterval(()?=>?{
??????x.value++
????},?1000)
????return?{
??????x,
????}
??},
})
unref
如果參數(shù)是 ref，則返回內(nèi)部值，否則返回參數(shù)本身。
toRef
可用于 ref 在源反應(yīng)對(duì)象上為屬性創(chuàng)建
const?test?=?reactive({
??x:?1,
??y:?2,
})
const?x?=?toRef(test,?'x')
return?{?x?}
toRefs
將反應(yīng)對(duì)象轉(zhuǎn)換為普通對(duì)象，其中所得對(duì)象的每個(gè)屬性都 ref 指向原始對(duì)象的相應(yīng)屬性,可用于解構(gòu)
const?test?=?reactive({
??x:?1,
??y:?2,
})
const?{?x?}?=?toRefs(test)
return?{?x?}
computed
計(jì)算屬性 返回的值返回一個(gè)不變的反應(yīng)性 ref 對(duì)象。
const?computedX?=?computed(()?=>?x.value?+?1)
return?{?computedX?}
watchEffect
它會(huì)在反應(yīng)性地跟蹤其依賴關(guān)系時(shí)立即運(yùn)行一個(gè)函數(shù)，并在依賴關(guān)系發(fā)生更改時(shí)重新運(yùn)行它。stop 停止監(jiān)聽
const?count?=?ref(0)
const?stop?=?watchEffect(()?=>?console.log(count.value))
setTimeout(()?=>?{
??count.value++
??if?(count.value?===?100)?{
????stop()
??}
},?1000)
watch
觀察者數(shù)據(jù)源可以是返回值的 getter 函數(shù)，也可以直接是 ref, stop 停止監(jiān)聽
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)
優(yōu)化的setData，多次調(diào)用將合并成一次執(zhí)行
nextTick()
setData是異步的，在setData執(zhí)行后完成后執(zhí)行的回調(diào)nextTick
//?1?返回Promise
await?nextTick()
//?2?執(zhí)行回調(diào)
nextTick(()?=>?{})
其他
對(duì)this.data的 set 進(jìn)行了劫持，會(huì)調(diào)用setData
最后
歡迎大家提出寶貴的意見，如有錯(cuò)誤還望評(píng)論區(qū)不要客氣，大家共同學(xué)習(xí)，一起進(jìn)步。github: https://github.com/kouchao/wxue，跪求star~