在我个人看来，Hook和CompositionAPI的概念非常相似。事实上，React中可用的大部分Hook都可以再次使用Vue3重新实现。为了拼写方便，以下内容使用Hook而不是CompositionAPI。相关代码都放在了github[1]上。useRequest后台很容易用hook封装一组数据操作，比如下面的useBookimport{ref,onMounted}from'vue'functionfetchBookList(){returnnewPromise((resolve)=>{setTimeout(()=>{resolve([1,2,3])},1000)})}exportfunctionuseBook(){constlist=ref([])constloading=ref(false)constgetList=async()=>{loading.value=trueconstdata=awaitfetchBookList({page:1})loading.value=falselist.value=data}onMounted(()=>{getList()})return{list,loading,getList}}里面封装了获取资源和处理loading状态的逻辑，看起来它可以满足我们的需求。缺点是对于另外一个资源，我们好像需要写类似的模板代码，所以我们可以把这堆代码抽象出来，封装到useApi方法中，实现functionuseApi(api){constloading=ref(false)constresult=ref(null)consterror=ref(null)constfetchResource=(params)=>{loading.value=truereturnapi(params).then(data=>{//)按照约定，将api返回的结果直接复制到resultresult中。value=data}).catch(e=>{error.value=e}).finally(()=>{loading.value=false})}return{loading,error,result,fetchResource}}修改以上useBook方法functionuseBook2(){const{loading,error,result,fetchResource,}=useApi(fetchBookList)onMounted(()=>{fetchResource({page:1})})return{loading,error,list:result}}注意这是一个很通用的方法，假设现在需要封装其他请求，处理起来也很方便，不用一遍又一遍地重复处理加载和错误标志'success'}resolve(payload)},1000)})}functionuseUser(){const{loading,error,result,fetchResource,}=useApi((params)=>{//封装请求返回值returnfetchUserList(params)。then(res=>{console.log(res)if(res.code===200){returnres.data}return[]})})//...}思考处理网络请求是一个很常见的问题在前端工作中，处理上面列举的加载、错误处理等，还可以包括debounce、throttling、polling等各种情况，离开页面时取消未完成的请求，这些都可以进一步封装在useRequest中。useEventBusEventBus在多个组件之间进行事件通知的场景中比较有用。通过监听事件和触发事件，可以实现订阅者和发布者的解耦，实现一个常规的eventBusclassEventBus{constructor(){this.eventMap=newMap()}on(key,cb){lethandlers=this.eventMap.get(key)if(!handlers){handlers=[]}handlers.push(cb)this.eventMap.set(key,handlers)}off(key,cb){consthandlers=this.eventMap.get(key)if(!handlers)returnif(cb){constidx=handlers.indexOf(cb)idx>-1&&handlers.splice(idx,1)this.eventMap.set(key,handlers)}else{this.eventMap.delete(key)}}once(key,cb){consthandlers=[(payload)=>{cb(payload)this.off(key)}]this.eventMap.set(key,handlers)}emit(key,payload){consthandlers=this.eventMap.get(key)if(!Array.isArray(handlers))returnhandlers.forEach(handler=>{handler(payload)})}}我们在组件初始化时监听事件，在交互时触发事件。这些很容易理解；但是很容易忘记我们还需要在组件卸载的时候取消事件注册和释放相关资源所以可以封装一个useEventBus接口，将这些逻辑统一处理。由于组件卸载时需要注销相关事件，简单的实现思路是：只要在注册时（onandonce）收集相关事件和处理函数，然后在Cancel（off）收集的事件当onUnmounted所以我们可以劫持事件注册方法，并创建一个额外的eventMap来收集注册到当前接口//事件总线的事件，全局单例constbus=newEventBus()exportdefaultfunctionuseEventBus(){letinstance={eventMap:newMap(),//reuseeventBus事件收集逻辑on:bus.on,once:bus.once,//清除eventMapclear(){this.eventMap.forEach((list,key)=>{list.forEach(cb=>{bus.off(key,cb)})})eventMap.clear()}}leteventMap=newMap()//劫持两个监听方法收集当前组件对应事件conston=(key,cb)=>{instance.on(key,cb)bus.on(key,cb)}constonce=(key,cb)=>{instance.once(key,cb)bus.once(key,cb)}//组件卸载时取消相关事件卸载（（）=>{instance.clear（）}）返回{on，once，off：bus.off.bind（bus），emit：bus。emit.bind(bus)}}这样，当price被unmounted时，组件注册的相关事件也会通过instance.clear被移除，比onUnmounted时手动取消每个组件方便多了。思考这个思路可以应用到很多组件卸载时需要进行清理操作的逻辑，比如：DOM事件注册addEventListener和removeEventListener定时器setTimeout和clearTimeout网络请求requestandabort从这个包中我们也可以看出一个很明显的组合API的优势：尽可能抽象出公共逻辑，而不用关注每个组件的具体细节。堆数据的方法封装在一起，比如下面的计数器函数useCounter(){constcount=ref(0)constdecrement=()=>{count.value--}constincrement=()=>{count.value++}return{count,decrement,increment}}这个useCounter暴露了获取当前值count，增加值decrement，减少值increment等数据和方法，然后可以愉快的在各个组件中实现计数器，在某些场景下，我们希望多个组件可以共享同一个计数器，而不是每个组件自己独立的计数器。一种情况是使用vuex等全局状态管理工具，然后修改useCounter的实现import{createStore}from'vuex'conststore=createStore({state:{count:0},mutations:{setCount(state,payload){state.count=payload}}})然后重新实现useCounterexportfunctionuseCounter2(){constcount=computed(()=>{returnstore.state.count})constdecrement=()=>{store.commit('setCount',count.value+1)}constincrement=()=>{store.commit('setCount',count.value+1)}return{count,decrement,increment}}显然，目前的useCounter2只是对state和mutations的封装store的，直接在组件中使用store也可以达到同样的效果，封装变得没有意义；另外，仅仅为了这个功能就在项目中添加一个vuex依赖，非常繁琐。基于这些问题，我们可以使用useModel来实现复用钩子状态的需求。整个思路也比较简单。使用Map保存钩子的状态。constmap=newWeakMap()exportdefaultfunctionuseModel(hook){if(!map.get(hook)){letans=hook()map.set(hook,ans)}returnmap.get(hook)}然后包装useCounterexportfunctionuseCounter3(){returnuseModel(useCounter)}//调用const{countinmultiplecomponents,decrement,increment}=useCounter3()//...const{count,decrement,increment}=useCounter3()这样每次调用useCounter3时，相同state被返回，多个组件实现了钩子的状态，它们之间共享。想一想userModel除了vuex和provide()/inject()之外，还提供了一种共享数据状态的方式，无需将所有状态放在一起或放在模块下就可以灵活地管理数据和操作数据。缺点是useCounter在没有与useModel一起打包时只是一个普通的钩子。在后期维护方面，我们很难判断某个状态是全局共享数据还是本地数据。因此，在使用useModel来处理hooks的共享状态时，一定要慎重考虑是否合适。useReducerredux的思想可以简单的概括为store维护全局state数据state，各个组件可以根据需要使用state中的数据，并监听state的变化。减速器接收动作并返回新状态。组件可以通过dispatch传递action来触发reducer状态更新，最后通知相关依赖更新数据。我们甚至可以hookredux的使用，类似functionreducer(state,action){//根据action进行处理//返回新的state}constinitialState={}const{state,dispatch}=useReducer(reducer,initialState);用Vue实现数据响应系统，我们甚至不需要实现任何发布订阅逻辑action格式为{type:string,payload:any}constdispatch=(action)=>{state.value=reducer(state.value,action)}return{state,dispatch}}然后实现一个useRedux负责投递reducer和actionimportuseReducerfrom'./index'functionreducer(state,action){switch(action.type){case"reset":returninitialState;case"increment":return{count:state.count+1};case"decrement":return{count:state.count-1};}}functionuseStore(){returnuseReducer(reducer,initialState);}我们希望维护一个全局的store，所以可以使用上面的useModelexportfunctionuseRedux(){returnuseModel(useStore);}和那么你可以在
