一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第29天，点击查看活动详情。
本题难度：⭐ ⭐
本题类型：Vue、工程化
答：把构建时的全局常量 __VUE_OPTIONS_API__ 置为 false。
讲解
我们知道，Vue3 新推出了 composition API，也兼容 Vue2 的 options API。
如果项目中没有使用 options API，只使用了 composition API，有没有办法把 Vue3 中 options API 这部分实现给抹去呢？
答案是有。
Vue3 对开发者非常友好，其中有一个功能就是特性开关，假设 Vue3 有 A、B、C 三个特性，同时也提供了 a、b、c 三个对应的特性开关，用户可以设置 a、b、c 为 true 或者 false 来开启或关闭对应的特性，这样有两个好处。
- 对于用户关闭的特性，
Vue3内部有Tree-Shaking机制，这个特性不会被打包进最终的构建资源中。 - 符合
Vue渐进式开发的理念，项目的设计更加灵活，需要就用，不需要就不用，不用担心资源体积过大。当项目升级时，也可以随时开启特性来支持某些API。
VUE_OPTIONS_API
其中，__VUE_OPTIONS_API__ 就是一个特性开关，开发者可以设置 __VUE_OPTIONS_API__ 为 false，来关闭 options API 这个特性。
接下来，我们来实验一下。
以 vite 项目为例，随便起一个 vue3 项目，执行打包命令，最终打包出来的文件如下：
可以看到，vendeor.js 最终的体积是 50.29 KB
接下来，在 define 选项里把 __VUE_OPTIONS_API__ 置为 false：
再次打包。
可以看到，vendeor.js 的体积变成了 43.91 KB，因为源码里关于 options API 的逻辑都没了。
虽然没减少多少体积，但这是一个性能优化的思路，我们还可以关闭其他特性嘛。
而且性能优化就是这样，是一个积少成多的过程，蚊子再小也是肉。
但是现在问题来了，如果把 options API 这个特性关闭了，又在项目中使用了 options API，最终打包会怎么样？
阿林已经测试过了，直接给出答案：使用了 options API 的组件会像没引入一样，直接失效了。
所以说，如果关闭这个特性，可能会导致某些组件无法使用的 bug。
目前，eslint 的 vue3 插件，似乎没有约束 options API 不能使用的规则。
所以，要在项目中关闭这一特性，最好在项目文档上说明一下，明确约定不使用 options API
当然，如果你比较厉害也有时间，也可以给 eslint 的 vue3 插件提 PR，加一下 Vue3 约束 options API 不能使用的规则。
结尾
本文参考：Vue.js设计与实现
阿林水平有限，文中如果有错误或表达不当的地方，非常欢迎在评论区指出，感谢～
如果我的文章对你有帮助，你的👍就是对我的最大支持^_^
我是阿林，输出洞见技术，再会！
上一篇：
下一篇：
