# 快速体验 Composition API

# vs. Options APIs

如下图所示：

image.png

Vue.js 3.0 核⼼优势：

  • 没有 this，没烦恼；
  • 更好的类型推导能⼒（TypeScript）；
  • 更友好的 Tree-shaking ⽀持（渐进式体验）；
  • 更⼤的代码压缩空间；
  • 更灵活的逻辑复⽤能⼒。

# 逻辑复用案例

对于逻辑复用这块我们可以通过几个小案例来体会一下。

案例一、常用功能性状态复用：

案例二、获取数据逻辑复用：

案例三、BOM API 封装：

# 基于 Webpack 构建

由于 Vue CLI 自身还没有很好的支持 Vue.js 3.0 版本，所以对于 3.0 项目的构建，我们还是需要直接使用 Webpack 构建。这里我们分享一个基于 Webpack 构建 Vue.js 3.0 的基本操作。

以下是具体命令行操作：

4

项目结构设计如下：

└─ vue-next-sample ····························· project root
   ├─ public ··································· static dir
   │  └─ index.html ···························· index template
   ├─ src ······································ source dir
   │  ├─ App.vue ······························· root component (sfc)
   │  └─ main.js ······························· app entry
   ├─ package.json ····························· package file
   └─ webpack.config.js ························ webpack config

其中 Webpack 的核心配置如下：

# 基于 Vue CLI experimental

Vue CLI 对 Vue.js 3.0 的支持目前是以一个插件（vue-cli-plugin-vue-next） (opens new window)的形式实现的，目前属于实验阶段（experimental）。

具体使用方法如下：

这里你需要注意，千万不要在成熟项⽬中使⽤这个插件直接升级项目，这会导致很多问题，后面 Vue 官方会给出 2.x 项目升级到 3.0 的迁移工具，到时候再视情况决定是否使用。

# 结合 Official Libraries

最后这一块内容是关于官方的几个库的最新版本，以及如何去结合 Vue.js 3.0 使用：

# Vue Router

vue-router (opens new window) 一直以来是使用 Vue.js 开发 SPA 类型应用必不可少的，针对 3.0，vue-router 也有一些调整。

注册（定义）路由的用法：

组件中获取当前路由信息的方法：

# Vuex

对于 Vuex (opens new window)，API 改动是最小的，基本上没有什么变化。

创建 Store 的方法：

组件中使用 Store 的方式一（跟 2.x 一样）：

方式二，使用 useStore API（推荐）：

除此之外，Vue.js 官方还给出了目前官方的一些周边库的状态，下表为：Official Libraries Vue 3.0 Support Status

Project Status
vue-router Alpha [Proposed RFCs] (opens new window) [GitHub] (opens new window) [npm] (opens new window)
vuex Alpha, with same API [GitHub] (opens new window) [npm] (opens new window)
vue-class-component Alpha [GitHub] (opens new window) [npm] (opens new window)
vue-cli Experimental support via vue-cli-plugin-vue-next
eslint-plugin-vue Alpha [GitHub] (opens new window) [npm] (opens new window)
vue-test-utils Pre-alpha [GitHub] (opens new window) [npm] (opens new window)
vue-devtools WIP
jsx WIP