v3的逻辑复用(v2和v3的区别)

本文链接：https://blog.youkuaiyun.com/weixin_43273592/article/details/131706164

文章讲述了在Vue项目开发中，通过组合式API来复用代码和管理状态。例如，封装了一个关注功能的自定义hook，处理关注不同类型的请求和loading状态，展示了Vuev3相对于v2中选项式API的优越性，以及闭包在函数内部访问外部变量的特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目开发中，有两个功能特别类似，如果单独实现，会有很多重复的代码

在v3中，我们利用组合式api的特点，他们抽象出来，进行封装，把得到函数写在一个单独的模块中，导出，以供复用.

例如：在做项目中，经常会有一个“关注”功能，有可能关注的作者 , 也可能关注的文章 , 也可能是关注其他内容 , 他们调用的api接口是同一个，就是一个参数不同，但是我们额外也可以加一个loading功能也在里面,避免重复触发这个事件 , 重复发送请求

针对这种情况，我封装了一个自定义的 hook函数，在函数的内部封装请求和loading值的修改，返回这个loading值和调用api函数,例如:

接口如下:

export const follow = (id: string, type: FollowType) =>
  request('/like', 'POST', {
    id,
    type
  })

关注中type类型注解如下:

// 关注的类型，作者|文章|百科话题|
export type FollowType = 'author' | 'article' | 'topic'

封装如下:

import { showToast } from 'vant'
import { ref } from 'vue'
import type { FollowType } from '../types/consult'
import { follow } from '../services/consult'

export const useFollow = (type: FollowType) => {
  const loading = ref(false)  //外层函数定义变量
  const followed= async (item: { id: string; likeFlag: number }) => {
    loading.value = true   //内层函数访问了 , 闭包的体现
    await follow(item.id, type)
    item.likeFlag = item.likeFlag ? 0 : 1  请求成功后给likeFlag取反
    showToast('操作成功')
    loading.value = false
  }

  return {
    followed,
    loading
  }
}

使用时直接引入调用即可

import { useFollow } from '../../../composable'
const { followed, loading } = useFollow('doc')

 <van-button :loading="loading" round size="small" type="primary" @click="followed(item)">
      {{ item.likeFlag === 1 ? '已关注' : '+ 关注' }}
    </van-button>

所以,在这里体现了v2和v3的区别

(1)组合式api(compositionAPI) 和选项式api

v2中的选项式api:

例如:export default {

methods, data, computed..

}

(2) 闭包:内层函数调用外层函数定义的变量,在这内层followed函数调用了外层useFollow函数定义的type和loading

组合式api更加有利于：逻辑复用， v2中使用mixins来做