前言✨
或许你和我一样习惯了Vue3
的写法,体验到使用CompositionAPI
抽离hooks
的酸爽以及使用<script setup>
语法糖的精炼之后,瞬间就会觉得以前Vue2
的OptionsAPI
不香了,那我们如何在Vue2
中使用CompositionAPI
了?
嘻嘻(o゜▽゜)o☆~让我们来开启Vue2
中的One Piece
吧!🚀
1️⃣ 使用compositionAPI
首先我们先满足基本需求,使用CompositionAPI
~
在命令行中输入以下命令,安装@vue/composition-api:
1 | npm install @vue/composition-api |
在入口文件main.js
中,通过Vue.use()
注册
1 | // main.js |
接下来,我们就可以使用CompositionAPI
了
1 | <script> |
2️⃣ 使用script setup语法糖
<script setup>
声明的顶层的绑定 (包括变量,函数声明,以及 import 引入的内容) 都能在模板中直接使用,即变量、函数无需返回,组件无需注册
既然<script setup>
语法糖这么香,咱还等什么,立即行动~
在命令行中输入以下命令,安装unplugin-vue2-script-setup:
1 | npm i unplugin-vue2-script-setup -D |
如果咱们使用的是vue-cli
,则需在vue.config.js
中加上如下配置:
1 | // vue.config.js |
vite
、webpack
等更多配置,请查看unplugin-vue2-script-setup ~
使用了<script setup>
语法糖后,代码就是如此简洁:
1 | <script setup> |
defineProps
、defineEmits
、defineExpose
是只在<script setup>
中才能使用的编译器宏,他们不需要导入且会随着<script setup>
处理过程一同被编译掉。
因此,我们在使用这三个api时不需要导入,但是eslint
却不知道。故我们需要在eslintrc.js
中作如下配置,消除eslint(no-undef)
提示:
1 | // .eslintrc.js |
- 可能你的eslint会出现如下提示:
我们可以在.eslintrc.js
中的rules
作如下配置:
1 | // .eslintrc.js |
如果你是使用ts
的话,参考下尤大的配置:.eslintrc.js
1 | // .eslintrc.js |
- 在
Vue2
项目中使用Volar
插件1
npm i @vue/runtime-dom -D
1 | // jsconfig.json |
3️⃣ 从compositionAPI中自动导入所需api(可选)
使用unplugin-auto-import
,能帮助我们从compositionAPI
中自动按需导入所需的API,如ref
、reactive
等。
这个插件不是必须的,但是能帮我们提高编码效率,使用后,我们的代码可以简化成:
1 | <script setup> |
通过以下命令安装此插件
1 | npm i -D unplugin-auto-import |
在vue.config.js
中加上如下配置:
1 | // vue.config.js |
解释一下上面eslintrc的配置项:
enabled
:可以是(true | false),是否开启自动生成自适应的全局变量配置文件filepath
: 配置自动生成的eslint
全局变量的json文件路径globalsPropValue
: 生成的全局变量的可访问性,可以是(true | false | ‘readonly’ | ‘readable’ | ‘writable’ | ‘writeable’)中的一种,布尔值false
和字符串值"readable"
等价于"readonly"
。类似地,布尔值true
和字符串值"writeable"
等价于"writable"
。
根据上面的配置,在我们启动工程时,工程会在src
目录下自动生成一份名叫.eslintrc-auto-import.json
的全局变量配置文件,然后我们在.eslintrc.js
配置文件中引入这个配置文件,即可消除eslint
的对当前页未引入的全局变量的eslint(no-undef)
提示。
1 | // .eslintrc.js |
当然这个插件unplugin-auto-import
能帮助我们提高效率的方式远非如此,比如自动引入其他的类库,详见unplugin-auto-import ~
🎉🎉🎉🎉🎉