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

前言

现在招聘要求中，初级也已经要求需要学会使用三大框架中的一个，并且可以快速上手使用。就我自己而言，已经能很熟练的使用vue2来开发项目，并且开始接触观摩一些vue2底层代码了。

去年，尤雨溪大佬又开始搞compositionApi，然后是vue3，和vue2相比有着很大的改变。

到目前为止，vue3已经成为vue的默认版本了。我们没有理由不去学习其中的新语法(破坏性升级比较大)，当然渐进式升级还是可以在vue3中使用vue2语法的。

所以我准备把自己这一年多来查阅过的和vue3相关的资料进行一下整理，写一个能快速入门vue3，并且能够快速搭建主流的vue3框架并进行项目开发的专栏。

这其中包含了 vue3，vite，typescript，pinia等主流库的介绍和使用，那么我们就来开始吧。

为什么要有Vue3？

明明我们可以用vue2很好的开发项目了，为什么尤大大还要开发出一个vue3？vue3和vue2相比，它比vue2好在哪？能给我们带来什么变化?这是一个值得思考的问题。

vue2中的一些问题

随着功能能的增长，复杂组件的代码变得难以维护

比如我们在一个组件中有两个大的功能，过滤功能和分页功能，逻辑拆分之后写到对应的选项中，由于两个逻辑写的过于复杂，变得难以维护，我们需要通过一些优化手段来优化我们的代码。

Mixin的解决方案：

我们将逻辑按照功能进行拆分，相同的逻辑写到一个mixin中，使得我们的逻辑变得更加清晰，调用也更加方便。

但是mixin的使用也有一些缺点

Mixin的缺点：

不清晰的 property 来源。当使用了多个 mixin 时，变量来源不明确（隐式传入），不利于阅读，使代码变得难以维护。
命名空间冲突。多个 mixins 的生命周期会融合到一起运行，但是同名属性、同名方法无法融合，可能会导致冲突。
隐式的跨 mixin 交流。mixins 和组件可能出现多对多的关系，复杂度较高（即一个组件可以引用多个 mixins，一个 mixins 也可以被多个组件引用）

注：VUE3 提出的 Composition API 旨在解决这些问题。mixins 的缺点是 Composition API 背后的主要动因之一，Composition API 受到 React Hooks 的启发。

vue2对于typescript的支持非常有限

我们想要在vue2中使用typescript，需要借助vue-class-component库来帮助实现，并且实现的并不友好。
对于template校验没有工具链支持。
如果想使用tsx，也需要借用vue-tsx-support来支持
配置起来麻烦，出现问题的几率也高。

Vue3介绍

从 2020 年 9 月份 Vue3.0 发布以来，经过一年多的发展补充，Vue3 的生态圈逐步完善，已经成熟到足以支撑日常项目的研发。而且，Vue3 在 Vue2 的基础上引入了 Typescript 重构了大量的代码，增加了很多新的特性，并发布了新一代的工程化工具 vite。这让 Vue3 对我们的研发变得更加友好。

2021 年 1 月 20 日，尤雨溪大佬凌晨发文，宣布 Vue 3 将成为新的默认版本。Vue 3 在 2022 年 2 月 7 日成为新的默认版本。
除了 Vue 核心库以外，几乎改进了框架的每个方面。
- 基于 Vite 的极速构建工具链
- <script setup> 带来的开发体验更丝滑的组合式 API 语法
- Volar 提供的单文件组件 TypeScript IDE 支持
- vue-tsc 提供的针对单文件组件的命令行类型检查和生成
- Pinia 提供的更简洁的状态管理
- 新的开发者工具扩展，同时支持 Vue 2/Vue 3，并且提供一个插件系统来允许社区库自行扩展开发者工具面板。

vue3的优点

优点：

将Vue内部的绝大部分api对外暴露，使Vue具备开发大型项目的能力，例如compiler编译api等
webpack的treeshaking(tree shaking 是 DCE 的一种方式，它可以在打包时忽略没有用到的代码。)支持度友好
使用Proxy进行响应式变量定义，性能提高1.2~2倍
ssr快了2~3倍
可在Vue2.0中单独使用composition-api插件，或者直接用它开发插件
对typescript支持更加友好
面向未来：对于尤雨溪最近创新的vite开发服务器（舍弃webpack、底层为Koa框架的高性能开发服务器）,直接使用的Vue3.0语法

vue3的缺点：

vue3将不再支持IE11，Vue 在 2.X 版本仍然支持 IE11，如果你想使用类似 Vue 3 的新特性，可以等等 Vue 2.7 版本。这次的 RFC 宣布，将会对 2.7 版本做向后兼容，移植 3.x 的部分新功能，以保证两个版本之间相似的开发体验。
对于习惯了Vue2.0开发模式的开发者来说，增加了心智负担，对开发者代码组织能力有更高的要求。

为什么Vue3使用Composition Api？

我们都知道，vue2使用的是OptionsApi的写法，但是为什么vue3要使用CompositionApi写法呢？我们来分别介绍下这两种写法，以及它们的局限性。

Options Api的选项式语法

从名字上看，Options翻译过来就是选项，Options Api可以理解为就是组件的各个选项，data、methods、computed、watch等等就像是组件的一个个选项，在对应的选项里做对应的事情。

export default {
    data () {
        return {
            // 定义响应式数据的选项
        }
    },
    methods: {
        // 定义相关方法的选项
    },
    computed: {
        // 计算属性的选项
    },
    watch: {
        // 监听数据的选项
    }
    ...
}

如上所示，Options Api的设计已经给你规定好了一个个的框框。如果你想写的随意点，对不起，请必须在对应的选项中做特定的事情。

Composition Api的组合式语法

Composition Api，我们也从名字来看，Composition表示组合，在Compostion Api的写法中，没有选项的概念了，设计指向的是组合，各种功能模块的组合。
Composition Api支持将相同的功能模块代码写在一起，甚至可以将某个功能单独的封装成函数，随意导入引用；
也可以将任意的数据定义成响应式，再也不用局限于data中，我们只需要将每个实现的功能组合起来就可以了。
逻辑代码count.js

import { ref } from "vue";
export default function Count() {
  let count = ref(0);
  function add() {
    count.value++;
  }
  return { count, add };
}

业务代码

<template>
    <div @click="add">{{count}}</div>
    <div>{{doubleCount}}</div>
</template>
<script setup>
    import { computed } from "vue";
    import Count from "./count.js";
    const { count, add } = Count();
    let doubleCount = computed(() => count.value * 2);
</script>

注意：在Vue3中已经不要求template下只能有一个根元素了。我们可以写多个根元素，提高了灵活性。

OptionsApi和Composition对比

Options Api

选项式的api，相关代码必须写在规定的选项中，导致相同功能的代码被分割，代码量上来后查找相关代码很麻烦，后期维护修改难度较大。
数据都挂载在同一个this下，对typescript的支持不友好，类型推断很麻烦。
代码的复用能力很差。

Composition Api

组合式api，代码定义很自由，相同功能代码整合到一起，查找修改都很方便。
公共代码的复用很简单，不同功能的代码也可以自由组合。
Vue相关的api都是通过import导入的，这在打包的时候很友好->只会打包我们使用到的 api。

我们的思维方式需要发生改变

其实从Options Api到Composition Api，语法上的改变不仅仅是为了解决上面所说的问题，也是Vue的创造者们关注点的转变
Options Api指的是选项，是组件的选项，关注的重点在组件上面。
而到了Vue3的Compostion Api，变成了功能的组合，或者说是数据的组合，关注的重点在数据上面，从Options到Composition就是从组件到数据的转变。
可能更希望的是研发人员将主要的关注放在数据逻辑的处理上面，围绕通过数据来驱动的核心，而不能因为组件限制了数据的流通，这些理念上的转换也是指得大家去思考的。

上面这张图很好地解释了我们要怎么去玩vue3，以前我们vue2中写逻辑可能是写到一个sfc组件中，但是在vue3中我们可以把不同的逻辑封装成函数，然后在sfc组件中进行组合使用，很方便逻辑的拆分、复用和单独维护，有没有觉得代码变得清晰了很多？

写到最后，再来放上一张经典的对比图来感受一下吧。

vue3入门01 - 初识 Vue3.x

前言