Vue 3.0 实战项目踩坑与经验总结

前言

年前公司开了一个新项目，普通的业务系统，心痒难耐的就上了 3.0 的船，遗憾的是工期比较紧没上 ts (我倒是希望搞一搞 tsx， 此处叹气)，小坑有一点。不过也算是踩过来了。本文主要整理记录一些，实际开发中遇到的问题，所以 vue3.0 实践大佬 可以不用继续看了，面向的是像我一样第一次使用 vue3.0 实践的小白。

文章从上手, 数据绑定, 组件化, 性能优化, 插件使用, 调试, 生态, 工程化 等方面分享了实战中的一些经验和踩坑，希望能对大家有所帮助。

上手

首先是直接用 vue-cli 创建了一个项目，新建文件的时候，就会出现 2 个同名的文件，一个 .js，一个 .ts。这是因为默认使用的是 setup 语法糖，当然你也可以直接使用 script 标签，取消勾选 setup 后，就没有同名文件了。

对于 setup, 这个 api 实在太香了，和 2.x 的写法比起来简直是质的提升。

数据绑定

这里要注意一点就是 v-model 的用法，在 3.0 中 v-model 不仅可以修饰 input，还可以修饰 select 以及 textarea，另外对于一些自定义组件，我们也可以通过自定义指令实现类似 v-model 的效果。

<template>
  <input type="text" v-model="count">
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

组件化

组件化的思想在 vue 中一直很重要，因为我们不可能把所有的东西都写在一个文件中，这显然会降低开发效率和可维护性。3.0 中提供了全新的方式来创建和使用组件，使用 script setup 替代 options api，模板和逻辑都在同一个文件中，这样代码看起来更加简洁和直观。

<script setup>
import { ref } from 'vue'

const count = ref(0)
</script>

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="count++">+</button>
  </div>
</template>

性能优化

3.0 中提供了很多新的特性来帮助我们进行性能优化，比如懒加载组件，树摇树，Suspense 等。懒加载组件可以通过 import() 函数来实现，这样只有在需要的时候才会加载组件，从而减少首屏加载时间。树摇树可以自动删除未使用的代码，从而减小包的大小。Suspense 可以用来处理异步组件，在组件加载完成之前，会显示一个占位符。

插件使用

3.0 中的插件系统也发生了很大的变化，现在插件不再需要手动安装了，只需要在 main.js 中引入就可以了。而且现在插件也可以直接使用 script setup 语法糖了。

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(router).use(store).mount('#app')

调试

3.0 中的调试工具也得到了改进，现在我们可以使用 Vue Devtools 来调试我们的应用程序。Vue Devtools 是一个浏览器扩展，可以帮助我们检查组件的状态，跟踪组件的生命周期，以及查看组件的事件流。

生态

3.0 的生态系统非常丰富，有很多优秀的库和工具可以使用，比如 Vue Router, Vuex, Axios, Vuetify 等。这些库和工具可以帮助我们快速搭建一个完整的应用程序。

工程化

3.0 的工程化也得到了很大的提升，现在我们可以使用 Vite 来构建我们的应用程序。Vite 是一个非常快的构建工具，可以大大提高我们的开发效率。

总结

总体来说，Vue 3.0 是一个非常优秀的框架，它具有很多新的特性和优势。使用 Vue 3.0 可以帮助我们快速搭建出高效、稳定、易维护的应用程序。