听说过Vue 3.0吗？快来学习一下这个前端框架的新版本！！

Vue是Web前端开发领域中最常用的框架之一，它和React、Angular并称为“前端三大框架”。对于每个从事Web前端开发的朋友们来说，应该或多或少都接触过Vue。

那么Vue目前已经更新到多少版本了呢？可能有些新手朋友还答不上来。没关系，我们可以到官方的GitHub代码仓库上看一看，地址是：

https://github.com/vuejs/vue/releases

下面给大家截一张图。我们看到Lastest release（最新版本）目前还是2.6.11呢。

如果大家经常关注一些编程类的网站，想必有听说过Vue 3.0。其实，3.0版本目前还没有正式发布，处于beta版本。beta版本意味着离正式发布已经不远了，虽然还不能直接在正式项目中使用，但我们可以提前学习一下新版本的Vue，来洞见一下未来的前端开发会用到哪些新技术。

一、使用Vue 3.0创建新项目

首先我们准备一下环境，先安装一下必要的开发工具Node.js和Git。

准备好环境以后，我们将Vue 3.0预览版的代码下载到本地，执行如下命令。

上述命令中，git clone表示从指定的代码仓库下载代码，复制到本地，后面的URL就是代码仓库的地址。末尾的vue3-start表示把代码放入vue3-start子目录中。

将代码下载完成后，切换到vue3-start命令下，然后安装依赖，启动项目。

如果在命令行看到下面的效果，说明项目启动成功了。

根据命令行中的提示，我们在浏览器中打开http://localhost:8080，就可以看到Vue 3.0项目的启动画面了。

下面我们来看一下Vue 3.0的代码是什么样的吧！使用代码编辑器打开vue3-start目录，然后查看一下里面的package.json文件，可以看到Vue的版本是3.0.0 beta.2。

下面我们来看一下项目的入口文件src/main.js，了解项目的启动流程。

上述代码中，第1行导入了vue核心包，第2行导入当前目录下的App.vue（单文件组件）。在把vue核心包导入进来以后，这里用到了它里面的一个叫做createApp()的函数，这个函数表示创建一个应用。然后在第3行把App组件放入，并调用mount()方法，传入参数“#app”，表示将App.vue文件中的一个id为app的元素挂载到Vue实例。

然后我们打开App.vue文件看一下里面的代码。

 

App.vue的代码对于用过Vue开发的朋友们来说应该都很熟悉了。App.vue是一个单文件组件，里面包含template（模板）、script（脚本）和style（样式）三部分。

与之前的版本不同的是，上述代码中多了一个setup()方法，这个方法是Vue 3.0中新增的一个方法。setup()方法会在created()方法调用之前自动执行，它的作用是为当前组件提供数据或者方法，合并到组件的data中。

二、在2.x版本的项目中体验3.0的新功能

为了帮助正在使用Vue 2.x版本的用户体验到新版本Vue带来的新功能，Vue官方发布了Composition API插件，它可以安装到Vue 2.x项目中。下面为大家介绍一下Composition API的使用。

首先我们用Vue脚手架（@vue/cli）创建一个2.x的项目，命令如下。

创建成功以后，我们安装一下Composition API插件。

 

安装成功后，我们打开vue-test项目下的src/main.js，将Composition API引入。

 

引入之后，我们修改一下src\App.vue文件，添加一个setup()方法。

最后我们执行如下命令，将项目启动。

启动项目以后，我们用浏览器查看一下项目的运行结果。在控制台中，可以看到出现了“setup已经执行”的提示，说明Composition API已经可以正确使用了。

实际上Vue 3.0的新功能还有很多，这里只是拿setup()方法给大家演示了新版本和旧版本有什么不同。如果大家有兴趣的话，可以再继续深入了解Vue 3.0的新特性。这篇文章只是先帮大家入个门，先把项目的架子搭起来，剩下的时间就留给读者自己动手体验吧！