vue3中一些简单的小技巧

最近在学习vue3+vite的时候学习到的一些小技巧，现在记录一下

---

前言

学习vue3+vite中看到了一些小技巧，这个小技巧可以在写代码时更加的顺畅，更加的丝滑。

---

一、setup name 增强

在写vue3中，有一个语法糖大家一定很清楚，那就是setup，但使用setup语法带来的一个问题就是无法自己设置name，而当我们使用keep-alive往往是需要name的，那我们怎么解决这个问题呢？

1、第一个方法就是使用两个标签具体看以下代码

<script lang="ts">
  import { defineComponent, onMounted } from 'vue'

  export default defineComponent({
    name: 'firstPage'
  })
  </script>
  
  <script lang="ts" setup>
  onMounted(() => {
    console.log('mounted')
  })
</script>

当然这样写似乎也可以，但是看着不够精细，有点乱糟糟的，不符合vue3的特点，于是我就找到了一个方法：

2、借助插件vite-plugin-vue-setup-extend可以让我们更优雅的解决这个问题，可以直接在script标签上定义name。

安装

npm i vite-plugin-vue-setup-extend -D

配置

// vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'

export default defineConfig({
  plugins: [
    VueSetupExtend()
  ]
})

使用

<script lang="ts" setup name="firstPage">
import { onMounted } from 'vue'

onMounted(() => {
  console.log('mounted')
})
</script>

二、告别.value

众所周知，ref要求我们访问变量时需要加上.value，这让很多开发者觉得难受

let num = ref(1)

const addNum = () => {
  num.value += 1
}

于是官方出的一种方案，在ref前加上$，该功能默认关闭，需要手动开启。

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      refTransform: true // 开启ref转换
    })
  ]
})

开启之后可以这样写：

let num = $ref(1)

const addNum = () => {
  num ++
}

该语法糖根据不同的版本配置也略有不同，下面贴一下我自己所用相关插件的版本：

"vue": "^3.2.2",
"@vitejs/plugin-vue": "^1.9.0",
"@vue/compiler-sfc": "^3.2.5",
"vite": "^2.6.13"

该属性仍处于实验性阶段，谨慎使用！！！

三、忽略.vue后缀

相信很多人在Vue2开发时，导入文件都是忽略.vue后缀的。但在Vite里，忽略.vue后缀会引起报错。

import Home from '@/views/home' // error
import Home from '@/views/home.vue' // ok

根据尤大大的回答，必须写后缀其实是故意这么设计的，也就是提倡大家这么去写。

但如果你真的不想写，官方也是提供了支持的。

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    extensions: ['.js', '.ts', '.jsx', '.tsx', '.vue']
  }
})

虽然可以这么做，不过毕竟官方文档说了不建议忽略.vue后缀，所以建议大家在实际开发中还是老老实实写上.vue。