通过Vue3中的CompositionAPI使我的代码更加清爽

1. 问题分析
2. 优化方案
• 直接拆分成文件
• index.ts 代码
• 在组件中使用
• 运行结果
• 使用 mixins
• 使用 CompositionAPI
3. 实现思路
4. 实现过程
• 添加 setup 选项
• 创建 module 模块
• 创建 InitData.ts 文件
• 在组件中使用
• 在文件中访问 initData
5. 踩坑分享
• dom 操作
• 访问 vuex
• 访问当前实例
• 无法访问$options
• 拆分文件的 class 写法
• 内置方法只有在 setup 中调用时才能访问

在我的开源项目中有一个组件是用来发送消息和展示消息的，这个组件的逻辑很复杂也是我整个项目的灵魂所在，单文件代码有 1100 多行。我每次用 webstorm 编辑这个文件时，电脑 cpu 温度都会飙升并伴随着卡顿。

就在前几天我终于忍不住了，意识到了 Vue2 的 optionsAPI 的缺陷，决定用 Vue3 的 CompositionAPI 来解决这个问题，本文就跟大家分享下我在优化过程中踩到的坑以及我所采用的解决方案，欢迎各位感兴趣的开发者阅读本文。

问题分析

我们先来看看组件的整体代码结构，如下图所示：

原文件链接：传送门