微信小程序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~
本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/Zp0NiqYFKcrqTn7A3kz92Q,如有侵权,请联系删除。