持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

前文写到了构建产物，vue框架为了兼容各个平台与打包器，会构建很多产物，包括IIFE,UMD,ESM，CJS等等，这些都是为了方便用户在各个平台去使用，而今天说到的这个特性开关，也是一个不错的方法。

vue3的写法变化

我们都知道，vue2的时候的主要使用的是Options API，例如

export default {
 name:'App',
 data(){
     return {
         a:1
     }
 },
 mounted(){}
}

这种纯粹就是对象属性的写法，也叫配置式API，通过属性去控制这个组件的行为，这一套api每个vuer应该都很熟悉。

但是到了vue3，官方顺应潮流，新增加了Composition API,类似于这样。

//a.js
export default ()=>{
 const a = ref(1)
}
//App.vue
<script setup>
import A from './a.js'
const {a} = A()
</script>

如果详细来写，Composition API可以写上几万字，但我这里不是赘述，大家可以看一下我之前写的完成第一个vue3.2项目有感

vue3同时支持这两种写法，毫无疑问，这样增加了vue的代码量。因此vue内部提供了一个开关，你可以通过打包器告诉vue，我不需要Options API，那么vue打包的时候就会tree-shaking这部分代码。

这个方法真的棒，这会更近一部减少我们打包的体积。

这个开关是__VUE_OPTIONS_API__

如何配置

在GitHub上有这样的记录github.com/vuejs/core/…

既然这样就好办了，我们直接配置即可

webpack

在vue.config.js里，直接使用DefinePlugin，貌似会报错，因此我们改变一下思路，这样配就好了


module.exports = defineConfig({
    chainWebpack: config => {
        config.plugin('feature-flags').tap(args => {
            args[0].__VUE_OPTIONS_API__ = JSON.stringify(false)
            return args
        })
    }
})

vite

vite中会更简单一些，提供了默认的配置项

export default defineConfig({
    define:{
        __VUE_OPTIONS_API__: JSON.stringify(false)
    }
})

启发

我们都知道，其实产品存在的意义就是改需求，那么我们能不能把一些变化的，之前做了后面又砍掉的需求，当他单独封装出来，然后通过特性开关去控制，这样又能减少多少无用加班呢。

精读《Vuejs设计与实现》(6)之特性开关

vue3的写法变化

如何配置

webpack

vite

启发