WARJY
chooks 
基于 @vue/composition-api 的vue hooks函数
Vue 3.0还没有发布，但可以使用@vue/composition-api体验Vue 3.0的函数式编程以及较好的typescript支持
@vue/composition-api以插件形式发布，并且完全向下兼容Vue 2.0
chooks以纯函数方式调用，支持typescript类型检测，并且完全向下兼容Vue 2.0
Hooks
Chooks文档 ( 浏览时建议切换为storybook横版 )
Function decorator
useDebounceFun— 为【函数】添加防抖功能的装饰器函数useThrottleFun— 为【函数】添加节流功能的装饰器函数useLoadingFun— 为【函数】添加等待功能的装饰器函数useTimeoutFun— 为【函数】添加延迟执行的装饰器函数
UI & Interactive
useSelect— 为【选项】提供单选，多选，选择变化等逻辑useForm— 为【表单】提供初始化数据，重置，数据验证，提交，自动提交等逻辑useList— 为【列表】添加滚动及虚拟列表功能useCount— 为【计数器】提供技术，倒计时等功能usePagination— 为【分页】提供页码，页数，每页大小，页码变化等逻辑useCubicBezier— 为为【贝塞尔过渡】提供计算，开始，结束等函数
Communication
useEmitter— 提供一个的订阅-发布模式机制
Storage
useStorage— 为【storage】提供过期时间，get，set等函数
Plus
useRouter— 为【vue-router】提供刷新，后退，跳转，获取参数等逻辑useStore— 为【vuex】提供state, commit, dispatch等逻辑useStatic— 为应用提供一些全局静态hooks
Install
npm install @vue/composition-api chooks
yarn add @vue/composition-api chooksUsage
import Vue from 'vue';
import VueCompositionAPI from '@vue/composition-api';
Vue.use(VueCompositionAPI); // 使用前需引用@vue/composition-api插件<template>
<div>
<YourPaginationComponent
:page.sync="page"
:pageSize="pageSize"
:pageCount="pageCount"
@change="pageChange" />
</div>
</template><script lang="ts">
import { Ref, SetupContext } from '@vue/composition-api'
import { usePagination } from 'chooks'
export default {
setup(prop:any, context:SetupContext) {
/*
usePagination函数包含了关于分页的数据和逻辑
{
page: Ref<number>,
pageSize: Ref<number>,
pageCount: Ref<number>,
pageChange(curPage:number): void
}
*/
const { page, pageSize, pageCount, pageChange } = usePagination()
//兼容Vue 2.0
let oldData = context.root.oldData
let oldMethod = context.root.oldMethod
//生命周期函数会在Vue 2.0生命周期函数后执行
onMounted(()=>{
console.log("after mounted")
})
return { page, pageSize, pageCount, pageChange }
},
data(){
return {
oldData: "this is an old data defined by vue 2.0"
}
},
mounted(){
console.log("todo mounted")
},
methods: {
oldMethod(){}
}
}
<script>