就在前段时间，vue官方发布了3.0.0-beta.1 版本，趁着五一假期有时间，就把之前的一个电商商城的项目，用最新的Composition API拿来改造一下！
GitHub地址请访问：https://github.com/GitHubGanKai/vue3-jd-h5
项目介绍vue-jd-h5是一个电商H5页面前端项目，基于Vue 3.0.0-beta.1 + Vant 实现，主要包括首页、分类页面、我的页面、购物车等。
本地线下代码vue2.6在分支demo中，使用mockjs数据进行开发，效果图请点击
master分支是线上生产环境代码，因为部分后台接口已经挂了�，不建议使用！
本项目还有很多不足之处，如果有想为此做贡献的伙伴，也欢迎给我们提出PR，或者issue ；
本项目是免费开源的，如果有伙伴想要在次基础上进行二次开发，可以clone或者fork整个仓库，如果能帮助到您，我将感到非常高兴，如果您觉得这个项目不错还请给个start！�
搭建步骤首先,选择一个文件，将代码clone到本地：
git clone https://github.com/GitHubGanKai/vue-jd-h5.git
查看所有分支：
gankaideMacBook-Pro:vue-jd-h5 gankai$ git branch -a demo demo_vue3 dev feature gh-pages * master remotes/origin/HEAD -> origin/master remotes/origin/demo remotes/origin/demo_vue3 remotes/origin/dev remotes/origin/feature remotes/origin/gh-pages remotes/origin/master
切换到分支demo_vue3开始进行开发！
�如果你在安装包的时候速度比较慢，那是因为NPM服务器在国外，这里给大家推荐一个可以随时切换NPM镜像的工具�NRM，有时候，我们开发的时候，为了加快安装包的安装速度，我们需要切换镜像源为国内的，但是，如果需要发布一些自己的组件到NPM的时候，又要来回切换回来，有了这个我们就方便多了！使用$ npm install -g nrm全局安装，然后，可以使用nrm ls 查看所有镜像：
gankaideMacBook-Pro:~ gankai$ nrm ls npm -------- https://registry.npmjs.org/ * yarn ------- https://registry.yarnpkg.com/ cnpm ------- taobao ----- https://registry.npm.taobao.org/ nj --------- https://registry.nodejitsu.com/ npmMirror -- https://skimdb.npmjs.com/registry/ edunpm -----
如果需要使用淘宝镜像，执行： nrm use taobao 可以随时切换源，当然了还有一个npm包版本管理工具nvm，主要是管理包版本的，如果有兴趣的小伙伴，可以自己去了解一下，这里就不啰嗦了�！
安装
进入刚才clone下来的项目根目录，安装@vue/composition-api 体验 vue3 新特性。
npm安装：
npm install @vue/composition-api --save
yarn安装：
yarn add @vue/composition-api
CDN
<script src="https://unpkg.com/@vue/composition-api/dist/vue-composition-api.umd.js"></script>
通过全局变量 window.vueCompositionApi 来使用。
使用
在使用任何 @vue/composition-api 提供的能力前，必须先通过 Vue.use() 进行安装:
在入口文件main.js中：
import Vue from 'vue'; import VueCompositionApi from '@vue/composition-api'; Vue.use(VueCompositionApi);
安装插件后，您就可以使用新的Composition API 来开发组件了。
⚠️目前vue官方为vue-cli提供了一个插件vue-cli-plugin-vue-next，你也可以直接在项目中直接添加最新的版本！
# in an existing Vue CLI project vue add vue-next
如果有想从零开始体验新版本的小伙伴可以采用这种方法进行安装，由于我们这个项目有依赖第三方库，如果全局安装，整个项目第三方UI库都无法运行！所以我们还是选择采用安装@vue/composition-api来进行体验，从而慢慢过渡到vue3最新版本
Vue 3.0 Composition-API基本特性体验setup函数
setup() 函数是 vue3 中专门为组件提供的新属性，相当于2.x版本中的created函数,之前版本的组件逻辑选项，现在都统一放在这个函数中处理。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口,具体声明周期相关勾子，可以参考如下：
vue2.x
vue3
beforeCreate
setup(替代)
created
setup(替代)
beforeMount
onBeforeMount
mounted
onMounted
beforeUpdate
onBeforeUpdate
updated
onUpdated
beforeDestroy
onBeforeUnmount
destroyed
onUnmounted
errorCaptured
onErrorCaptured