5个知识点,让vue3开发更丝滑

前言最近鼓捣了一下 Vue3 + Vite2,遇到了不少问题,整理了5个可以提高开发效率的小知识,让你在 Vue3 的项目开发中更加丝滑、顺畅 。
一、setup name 增强Vue3的setup语法糖是个好东西,但使用setup语法带来的第一个问题就是无法自定义name,而我们使用keep-alive往往是需要name的,解决这个问题通常是通过写两个script标签来解决,一个使用setup,一个不使用,但这样必然是不够优雅的 。
<script lang="ts">import { defineComponent, onMounted } from 'vue'export default defineComponent({name: 'OrderList'})</script><script lang="ts" setup>onMounted(() => {console.log('mounted===')})</script>这时候借助插件
vite-plugin-vue-setup-extend可以让我们更优雅的解决这个问题,不用写两个script标签,可以直接在script标签上定义name 。
安装
npm i vite-plugin-vue-setup-extend -D配置
// vite.config.tsimport { defineConfig } from 'vite'import VueSetupExtend from 'vite-plugin-vue-setup-extend'export default defineConfig({plugins: [VueSetupExtend()]})【5个知识点,让vue3开发更丝滑】使用
<script lang="ts" setup name="OrderList">import { onMounted } from 'vue'onMounted(() => {console.log('mounted===')})</script>二、API 自动导入setup语法让我们不用再一个一个的把变量和方法都return出去就能在模板上使用,大大的解放了我们的双手 。然而对于一些常用的VueAPI,比如ref、computed、watch等,还是每次都需要我们在页面上手动进行import 。
我们可以通过unplugin-auto-import实现自动导入,无需import即可在文件里使用Vue的API 。
安装
npm i unplugin-auto-import -D配置
// vite.config.tsimport { defineConfig } from 'vite'import AutoImport from 'unplugin-auto-import/vite'export default defineConfig({plugins: [AutoImport({// 可以自定义文件生成的位置,默认是根目录下,使用ts的建议放src目录下dts: 'src/auto-imports.d.ts',imports: ['vue']})]})安装配置完会自动生成auto-imports.d.ts文件 。
// auto-imports.d.ts// Generated by 'unplugin-auto-import'// We suggest you to commit this file into source controldeclare global {const computed: typeof import('vue')['computed']const createApp: typeof import('vue')['createApp']const customRef: typeof import('vue')['customRef']const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']const defineComponent: typeof import('vue')['defineComponent']const effectScope: typeof import('vue')['effectScope']const EffectScope: typeof import('vue')['EffectScope']const getCurrentInstance: typeof import('vue')['getCurrentInstance']const getCurrentScope: typeof import('vue')['getCurrentScope']const h: typeof import('vue')['h']const inject: typeof import('vue')['inject']const isReadonly: typeof import('vue')['isReadonly']const isRef: typeof import('vue')['isRef']// ...}export {}使用
<script lang="ts" setup name="OrderList">// 不用import,直接使用refconst count = ref(0)onMounted(() => {console.log('mounted===')})</script>上面我们在vite.config.ts的配置里只导入了vue,imports: ['vue'],除了vue的你也可以根据文档导入其他的如vue-router、vue-use等 。
个人建议只对一些比较熟悉的API做自动导入,如vue的API我们在开发时都比较熟悉,闭着眼都能写出来,对于一些不大熟悉的像VueUse这种库,还是使用import更好一些,毕竟编辑器都有提示,不易写错 。
解决eslint报错问题
在没有import的情况下使用会导致eslint提示报错,通过如下步骤解决:
// vite.config.tsAutoImport({dts: 'types/auto-imports.d.ts',imports: ['vue'],// 解决eslint报错问题eslintrc: {enabled: true}})这时会自动生成
.eslintrc-auto-import.json文件,将其导入eslintrc.js即可 。
// eslintrc.jsmodule.exports = {extends: ['./.eslintrc-auto-import.json']}三、告别.value众所周知,ref要求我们访问变量时需要加上.value,这让很多开发者觉得难受.
let count = ref(1)const addCount = () => {count.value += 1}后来尤大大也提交了一份新的ref语法糖提案 。
ref: count = 1const addCount = () => {count += 1}该提案一出便引起了社区的一片讨论,时间已经过去很久了,这里就不再废话这个话题了 。


推荐阅读