目前需要学习 Vue3 吗?

在 2020 年的 9 月 19 日,万众期待的 Vue3 终于发布了正式版,命名为“One Piece”

它也带来了很多新的特性:更好的性能、更小的包体积、更好的 TypeScript 集成、更优秀的 API 设计。

在 vue3 刚刚发布时,很多人也是跃跃欲试,想要尝试 vue3 的各种新特性。

但是事实上在刚刚发布的时候我们使用 vue3 来写 demo 练习是没有问题的,真正在实际业务项目中使用 vue3 还需要一个相对的过程;

包括 vue3 的进一步稳定、包括社区更多 vue3 相关的插件、组件库的支持和完善。

那么现在是否是学习 vue3 的时间呢?

答案是肯定的

首先 vue3 在经过一系列的更新和维护后,已经是趋于稳定,并且在之前尤雨溪也宣布在今年(2021 年)第二季度会

将 vue3 作为 Vue CLI 的默认版本了。

目前社区也经过一定时间的沉淀,更加的完善了,包括 AntDesignVue、Element-Plus 都提供了对 Vue3 的支持,所以

很多公司目前新的项目都已经在使用 Vue3 来进行开发了。

p 并且在面试的时候,几乎都会问到各种各样 Vue3、Vite2 工具相关的问题。

Vue3 带来的变化(源码)

  1. 源码通过 monorepo 的形式来管理源代码:
    Mono:单个
    Repo:repository 仓库
    主要是将许多项目的代码存储在同一个 repository 中;
    这样做的目的是多个包本身相互独立,可以有自己的功能逻辑、单元测试等,同时又在同一个仓库下方便管理;
    而且模块划分的更加清晰,可维护性、可扩展性更强;
  2. 源码使用 TypeScript 来进行重写:
    在 Vue2.x 的时候,Vue 使用 Flow 来进行类型检测
    在 Vue3.x 的时候,Vue 的源码全部使用 TypeScript 来进行重构,并且 Vue 本身对 TypeScript 支持也更好了;

Vue3 带来的变化(性能)

  1. 使用 Proxy 进行数据劫持
    • 在 Vue2.x 的时候,Vue2 是使用 Object.defineProperty 来劫持数据的 getter 和 setter 方法的;
    • 这种方式一致存在一个缺陷就是当给对象添加或者删除属性时,是无法劫持和监听的;
    • 所以在 Vue2.x 的时候,不得不提供一些特殊的 API,比如$set或$delete,事实上都是一些 hack 方法,也增加了开发者学习新的 API 的成本;
    • 而在 Vue3.x 开始,Vue 使用 Proxy 来实现数据的劫持,这个 API 的用法和相关的原理我也会在后续讲到;
  2. 删除了一些不必要的 API:
    • 移除了实例上的$on, $off 和 $once;
    • 移除了一些特性:如 filter、内联模板等;
  3. 包括编译方面的优化:
    • 生成 Block Tree、Slot 编译优化、diff 算法优化;

Vue3 带来的变化(新的 API)

  1. 由 Options API 到 Composition API:
    • 在 Vue2.x 的时候,我们会通过 Options API 来描述组件对象;
    • Options API 包括 data、props、methods、computed、生命周期等等这些选项;
    • 存在比较大的问题是多个逻辑可能是在不同的地方:
      • 比如 created 中会使用某一个 method 来修改 data 的数据,代码的内聚性非常差;
    • Composition API 可以将 相关联的代码 放到同一处 进行处理,而不需要在多个 Options 之间寻找;
  2. Hooks 函数增加代码的复用性:
    • 在 Vue2.x 的时候,我们通常通过 mixins 在多个组件之间共享逻辑;
    • 但是有一个很大的缺陷就是 mixins 也是由一大堆的 Options 组成的,并且多个 mixins 会存在命名冲突的问题;
    • 在 Vue3.x 中,我们可以通过 Hook 函数,来将一部分独立的逻辑抽取出去,并且它们还可以做到是响应式的

Vue 的源码

如果想要学习 Vue 的源码,比如看 createApp 的实现过程,应该怎么办呢?

  1. 第一步:在 GitHub 上搜索 vue-next,下载源代码;
    这里推荐通过 git clone 的方式下载;
  2. 第二步:安装 Vue 源码项目相关的依赖;
    执行 yarn install
  3. 第三步:对项目执行打包操作
    执行 yarn dev(执行前修改脚本)
    image-20210925095430520
  4. 第四步:通过 packages/vue/dist/vue.global.js 调试代码