Vue3如何用CompositionAPI优化代码量
我们先来看看组件的整体代码结构：
template部分占用267行
script部分占用889行
style部分为外部引用占用1行
罪魁祸首就是script部分，本文要优化的就是这一部分的代码，我们再来细看下script中的代码结构：
props部分占用6行
data部分占用52行
created部分占用8行
mounted部分占用98行
methods部分占用672行
emits部分占用6行
computed部分占用8行
watch部分占用26行
现在罪魁祸首是methods部分，那么我们只需要把methods部分的代码拆分出去，单文件代码量就大大减少了。
优化方案
经过上述分析后，我们已经知道了问题所在，接下来就跟大家分享下我一开始想到的方案以及最终所采用的方案。
直接拆分成文件
一开始我觉得既然methods方法占用的行数太多，那么我在src下创建一个methods文件夹，把每个组件中的methods的方法按照组件名进行划分，创建对应的文件夹，在对应的组件文件夹内部，将methods中的方法拆分成独立的ts文件，最后创建index.ts文件，将其进行统一导出，在组件中使用时按需导入index.ts中暴露出来的模块。
创建methods文件夹
把每个组件中的methods的方法按照组件名进行划分，创建对应的文件夹，即：message-display
将methods中的方法拆分成独立的ts文件，即：message-display文件夹下的ts文件
创建index.ts文件，即：methods下的index.ts文件
index.ts代码
如下所示，我们将拆分的模块方法进行导入，然后统一export出去
import compressPic from "@/methods/message-display/CompressPic"
;
import pasteHandle from "
@/methods/message-display/PasteHandle"
;
export { compressPic, pasteHandle };
在组件中使用
最后，我们在组件中按需导入即可，如下所示：
import { compressPic, pasteHandle } from "@/methods/index"
;
export default defineComponent({ mounted() { compressPic();
pasteHandle();
} })
运行结果
当我自信满满的开始跑项目时，发现浏览器的控制台报错了，提示我this未定义，突然间我意识到将代码拆分成文件后，this是指向那个文件的，并没有指向当前组件实例，当然可以将this作为参数传进去，但我觉得这样并不妥，用到一个方法就传一个this进去，会产生很多冗余代码，因此这个方案被我pass了。
使用mixins
前一个方案因为this的问题以失败告终，在Vue2.x的时候官方提供了mixins来解决this问题，我们使用mixin来定义我们的函数，最后使用mixins进行混入，这样就可以在任意地方使用了。
由于mixins是全局混入的，一旦有重名的mixin原来的就会被覆盖，所以这个方案也不合适，pass。
使用CompositionAPI
上述两个方案都不合适，那 么CompositionAPI就刚好弥补上述方案的短处，成功的实现了我们想要实现的需求。
我们先来看看什么是CompositionAPI，正如文档所述，我们可以将原先optionsAPI中定义的函数以及这个函数需要用到的data变量，全部归类到一起，放到setup函数里，功能开发完成后，将组件需要的函数和data在setup进行return。
setup函数在创建组件之前执行，因此它是没有this的，这个函数可以接收2个参数: props和context，他们的类型定义如下：
interface Data { [key: string]: unknown } interface SetupContext { attrs: Data slots: Slots emit: (event: string, ...args: unknown[]) =>void } function setup(props: Data, context: SetupContext): Data
我的组件需要拿到父组件传过来的props中的值，需要通过emit来向父组件传递数据，props和context这两个参数正好解决了我这个问题。
setup又是个函数，也就意味着我们可以将所有的函数拆分成独立的ts文件，然后在组件中导入，在setup中将其return给组件即可，这样就很完美的实现了一开始我们一开始所说的的拆分。
实现思路
接下来的内容会涉及到响应性API，如果对响应式API不了解的开发者请先移步官方文档。
我们分析出方案后，接下来我们就来看看具体的实现路：
在组件的导出对象中添加setup属性，传入props和context
在src下创建module文件夹，将拆分出来的功能代码按组件进行划分
将每一个组件中的函数进一步按功能进行细分，此处我分了四个文件夹出来
common-methods 公共方法，存放不需要依赖组件实例的方法
components-methods 组件方法，存放当前组件模版需要使用的方法
main-entrance 主入口，存放setup中使用的函数
split-method 拆分出来的方法，存放需要依赖组件实例的方法，setup中函数拆分出来的文件也放在此处
在主入口文件夹中创建InitData.ts文件，该文件用于保存、共享当前组件需要用到的响应式data变量
所有函数拆分完成后，我们在组件中将其导入，在setup中进行return即可
实现过程
接下来我们将上述思路进行实现。
添加setup选项
我们在vue组件的导出部分，在其对象内部添加setup选项，如下所示：
<template>
<
!---其他内容省略-->
<
/template>
<
script lang="
ts"
>
export default defineComponent({ name: "
message-display"
, props: { listId: String, // 消息id messageStatus: Number, // 消息类型 buddyId: String, // 好友id buddyName: String, // 好友昵称 serverTime: String // 服务器时间 }, setup(props, context) { // 在此处即可写响应性API提供的方法，注意⚠️此处不能用this } } <
/script>
创建module模块
我们在src下创建module文件夹，用于存放我们拆分出来的功能代码文件。
创建InitData.ts文件
我们将组件中用到的响应式数据，统一在这里进行定义，然后在setup中进行return，该文件的部分代码定义如下，完整代码请移步：InitData.ts
import { reactive, Ref, ref, getCurrentInstance, ComponentInternalInstance } from "vue"
;
import { emojiObj, messageDisplayDataType, msgListType, toolbarObj } from "
@/type/ComponentDataType"
;
import { Store, useStore } from "
vuex"
;
// DOM操作,必须return否则不会生效 const messagesContainer = ref<
HTMLDivElement | null>
(null);
const msgInputContainer = ref<
HTMLDivElement | null>
(null);
const selectImg = ref<
HTMLImageElement | null>
(null);
// 响应式Data变量 const messageContent = ref<
string>
("
"
);
const emoticonShowStatus = ref<
string>
("
none"
);
const senderMessageList = reactive([]);
const isBottomOut = ref<
boolean>
(true);
let listId = ref<
string>
("
"
);
let messageStatus = ref<
number>
(0);
let buddyId = ref<
string>
("
"
);
let buddyName = ref<
string>
("
"
);
let serverTime = ref<
string>
("
"
);
let emit: (event: string, ...args: any[]) =>
void = () =>
{ return 0;
};
// store与当前实例 let $store = useStore();
let currentInstance = getCurrentInstance();
export default function initData(): messageDisplayDataType { // 定义set方法，将props中的数据写入当前实例 const setData = ( listIdParam: Ref<
string>
, messageStatusParam: Ref<
number>
, buddyIdParam: Ref<
string>
, buddyNameParam: Ref<
string>
, serverTimeParam: Ref<
string>
, emitParam: (event: string, ...args: any[]) =>
void ) =>
{ listId = listIdParam;
messageStatus = messageStatusParam;
buddyId = buddyIdParam;
buddyName = buddyNameParam;
serverTime = serverTimeParam;
emit = emitParam;
};
const setProperty = ( storeParam: Store<
any>
, instanceParam: ComponentInternalInstance | null ) =>
{ $store = storeParam;
currentInstance = instanceParam;
};
// 返回组件需要的Data return { messagesContainer, msgInputContainer, selectImg, $store, emoticonShowStatus, currentInstance, // .... 其他部分省略.... emit } }
??细心的开发者可能已经发现，我把响应式变量定义在导出的函数外面了，之所以这么做是因为setup的一些特殊原因，在下面的踩坑章节我将会详解我为什么要这样做。
在组件中使用
定义完相应死变量后，我们就可以在组件中导入使用了，部分代码如下所示，完整代码请移步：message-display.vue
import initData from "@/module/message-display/main-entrance/InitData"
;
export default defineComponent({ setup(props, context) { // 初始化组件需要的data数据 const { createDisSrc, resourceObj, messageContent, emoticonShowStatus, emojiList, toolbarList, senderMessageList, isBottomOut, audioCtx, arrFrequency, pageStart, pageEnd, pageNo, pageSize, sessionMessageData, msgListPanelHeight, isLoading, isLastPage, msgTotals, isFirstLoading, messagesContainer, msgInputContainer, selectImg } = initData();
// 返回组件需要用到的方法 return { createDisSrc, resourceObj, messageContent, emoticonShowStatus, emojiList, toolbarList, senderMessageList, isBottomOut, audioCtx, arrFrequency, pageStart, pageEnd, pageNo, pageSize, sessionMessageData, msgListPanelHeight, isLoading, isLastPage, msgTotals, isFirstLoading, messagesContainer, msgInputContainer, selectImg };
} })
我们定义后响应式变量后，就可以在拆分出来的文件中导入initData函数，访问里面存储的变量了。
在文件中访问initData
我将页面内所有的事件监听也拆分成了文件，放在了EventMonitoring.ts中，在事件监听的处理函数是需要访问initData里存储的变量的，接下来我们就来看下如何访问，部分代码如下所示，完整代码请移步EventMonitoring.ts)
import { computed, Ref, ComputedRef, watch, getCurrentInstance, toRefs } from "vue"
;
import { useStore } from "
vuex"
;
import initData from "
@/module/message-display/main-entrance/InitData"
;
import { SetupContext } from "
@vue/runtime-core"
;
import _ from "
lodash"
;
export default function eventMonitoring( props: messageDisplayPropsType, context: SetupContext<
any>
): { userID: ComputedRef<
string>
;
onlineUsers: ComputedRef<
number>
;
} | void { const $store = useStore();
const currentInstance = getCurrentInstance();
// 获取传递的参数 const data = initData();
// 将props改为响应式 const prop = toRefs(props);
// 获取data中的数据 const senderMessageList = data.senderMessageList;
const sessionMessageData = data.sessionMessageData;
const pageStart = data.pageStart;
const pageEnd = data.pageEnd;
const pageNo = data.pageNo;
const isLastPage = data.isLastPage;
const msgTotals = data.msgTotals;
const msgListPanelHeight = data.msgListPanelHeight;
const isLoading = data.isLoading;
const isFirstLoading = data.isFirstLoading;
const listId = data.listId;
const messageStatus = data.messageStatus;
const buddyId = data.buddyId;
const buddyName = data.buddyName;
const serverTime = data.serverTime;
const messagesContainer = data.messagesContainer as Ref<
HTMLDivElement>
;
// 监听listID改变 watch(prop.listId, (newMsgId: string) =>
{ listId.value = newMsgId;
messageStatus.value = prop.messageStatus.value;
buddyId.value = prop.buddyId.value;
buddyName.value = prop.buddyName.value;
serverTime.value = prop.serverTime.value;
// 消息id发生改变,清空消息列表数据 senderMessageList.length = 0;
// 初始化分页数据 sessionMessageData.length = 0;
pageStart.value = 0;
pageEnd.value = 0;
pageNo.value = 1;
isLastPage.value = false;
msgTotals.value = 0;
msgListPanelHeight.value = 0;
isLoading.value = false;
isFirstLoading.value = true;
});
}
正如代码中那样，在文件中使用时，拿出initData中对应的变量，需要修改其值时，只需要修改他的value即可。
至此，有关compositionAPI的基本使用就跟大家讲解完了，下面将跟大家分享下我在实现过程中所踩的坑，以及我的解决方案。
踩坑分享
今天是周四，我周一开始决定使用CompositionAPI来重构我这个组件的，一直搞到昨天晚上才重构完成，前前后后踩了很多坑，正所谓踩坑越多你越强，这句话还是很有道理的??。
接下来就跟大家分享下我踩到的一些坑以及我的解决方案。
dom操作
我的组件需要对dom进行操作，在optionsAPI中可以使用this.$refs.xxx来访问组件dom，在setup中是没有this的，翻了下官方文档后，发现需要通过ref来定义，如下所示:
<template>
<
div ref="
msgInputContainer"
>
<
/div>
<
ul v-for="
(item, i) in list"
:ref="
el =>
{ ulContainer[i] = el }"
>
<
/ul>
<
/template>
<
script lang="
ts"
>
import { ref, reactive, onBeforeUpdate } from "
vue"
;
setup(){ export default defineComponent({ // DOM操作,必须return否则不会生效 // 获取单一dom const messagesContainer = ref<
HTMLDivElement | null>
(null);
// 获取列表dom const ulContainer = ref<
HTMLUListElement>
([]);
const list = reactive([1, 2, 3]);
// 列表dom在组件更新前必须初始化 onBeforeUpdate(() =>
{ ulContainer.value = [];
});
return { messagesContainer, list, ulContainer } }) } <
/script>
访问vuex
在setup中访问vuex需要通过useStore()来访问，代码如下所示:
import { useStore } from "vuex"
;
const $store = useStore();
console.log($store.state.token);
访问当前实例
在组件中需要访问挂载在globalProperties上的东西，在setup中就需要通过getCurrentInstance()来访问了，代码如下所示：
import { getCurrentInstance } from "vue"
;
const currentInstance = getCurrentInstance();
currentInstance?.appContext.config.globalProperties.$socket.sendObj({ code: 200, token: $store.state.token, userID: $store.state.userID, msg: $store.state.userID + "
上线"
});
无法访问$options
我重构的websocket插件是将监听消息接收方法放在options上的，需要通过this.$options.xxx来访问，文档翻了一圈没找到有关在setup中使用的内容，那看来是不能访问了，那么我只能选择妥协，把插件挂载在options上的方法放到globalProperties上，这样问题就解决了。
内置方法只能在setup中访问
如上所述，我们使用到了getCurrentInstance和useStore，这两个内置方法还有initData中定义的那些响应式数据，只有在setup中使用时才能拿到数据，否则就是null。
我的文件是拆分出去的，有些函数是运行在某个拆分出来的文件中的，不可能都在setup中执行一遍的，响应式变量也不可能全当作参数进行传递的，为了解决这个问题，我有试过使用provide注入然后通过inject访问，结果运行后发现不好使，控制台报黄色警告说provide和inject只能运行在setup中，我直接裂开，当时发了一条沸点求助了下，到了晚上也没得到解决方案??。
经过一番求助后，我的好友@前端印象给我提供了一个思路，成功的解决了这个问题，也就是我上面initData的做法，将响应式变量定义在导出函数的外面，这样我们在拆分出来的文件中导入initData方法时，里面的变量都是指向同一个地址，可以直接访问存储在里面的变量且不会将其进行初始化。
至于getCurrentInstance和useStore访问出现null的情景，还有props、emit的使用问题，我们可以在initData的导出函数内部定义set方法，在setup里的方法中获取到实例后，通过set方法将其设置进我们定义的变量中。
Vue3是前端开发的重要利器，随着Composition API的推出，大幅度增加了Vue3开发效率。今天我们来一起了解一下如何利用Composition API来优化代码量。
Composition API是什么？
Composition API是Vue3中新引进的一种API，它可以让开发者更加灵活地组合逻辑代码，解决Vue2中大型组件和代码复杂度可能导致的问题。通过使用Composition API，可以将复杂的组件拆分成多个独立逻辑模块，提高了代码的可重用性。
使用Composition API优化代码量
1.使用setup函数
Vue3中，使用Composition API最重要的方法就是通过setup函数。这个函数是一种高级模式，可以在组件的最开始被调用，其返回值就是组件的数据和方法。在setup函数中，我们可以使用各种响应式API来声明组件的数据、方法和计算属性等。
2.组合逻辑
Composition API允许我们将逻辑关注点聚合到一起，实现更加直观和可读的代码。比如说在Vue2中，我们需要将所有的生命周期挂载到一个函数中，而在Vue3中，我们可以按逻辑模块划分代码，将其集合到多个函数中，代码逻辑更加清晰。
3.实例代替this
在Vue2中，我们需要使用this才能访问组件实例，但是在Vue3中，Composition API允许我们通过实例操作响应式数据。因此，我们可以将this替换为组件实例，解决了this指向不清的问题。
4.提高代码复用性
使用Composition API可以更清晰地组织代码，降低了组件的耦合性，提高了代码的复用性。我们可以将组件定义为函数，可以接受props作为参数，并将组件的状态和方法封装在函数中，这样就可以实现更加灵活方便的组件复用。
总结
使用Composition API可以使Vue3中的组件更加灵活和易于维护，提高代码复用性和可读性。总体来说，Composition API为开发者提供了更加直观和清晰的方式来组织和编写代码，是Vue3中的一个重要的新功能。
