Vue3.0新特性
Vue3.0 中有两个新特性是需要重点关注的。
（1）双向数据绑定的原理发生了改变。Vue2.0 使用 es6 中的 Object.defineProperty 数据劫持原理实现，而在 Vue3.0 中使用的是 Proxy 代理实现双向数据绑定，使用代理形式渲染速度更快。
（2）新增组合式 API（Composition API）。在 Vue3.0 中重点需要学习的就是组合式 API，即需要掌握一组函数 API。
搭建 Vue3.0 项目：通常 Vue3.0 项目的搭建方法是使用 vue-cli，首先需要升级 Vue 的版本，打开控制台查看当前 Vue 的版本，运行 vue -V（注意此处 V 是大写字母）。
查看 Vue 的版本，如果不是最新版本，应先卸载当前版本，再安装新版本，当前脚手架的最新版本为 4.X。
卸载：
npm uninstall vue-cli -g安装：
npm install @vue/cli -g|
同样建议升级 Node 环境、npm 版本（npm install npm@latest -g）。 |
使用 vue-cli 创建项目的步骤如下。
-
打开控制台，进入站点根目录。
-
运行 “vue create project name”，运行结果如图 12-1 所示。
Figure 1. 图12-1 vue create创建项目 -
选择 Manually select features 手动自定义安装，最上面两个选项是 Vue2 和 Vue3 的默认安装。
-
手动安装模块。
选择 Manually select features 选项之后，会弹出自定义模块选择窗口，在此窗口中可以选择 Vue 版本、是否启用 Babel、是否启用路由等模块，其中 Vue 版本、Babel、Router 是必须要选择的，如图 12-2 所示。
Figure 2. 图12-2 Vue3自定义模块配置①Choose Vue version：选择Vue版本（必选）。 ②Babel：解析es6代码（必选）。 ③TypeScript（自定义选择）。 ④Progressive Web App（PWA）Support：渐进式网页应用（自定义选择）。 ⑤Router：路由（必选）。 ⑥Vuex：数据仓库（自定义选择）。 ⑦CSS Pre-processors：CSS预处理器（自定义选择）。 ⑧Linter/Formatter：代码校验（自定义选择，基本不用）。 ⑨Unit Testing：单元测试（自定义选择）。 ⑩E2E Testing（自定义选择）。
使用空格键进行选择，按 Enter 键确定。
-
选择 Vue 版本，当前选择 Vue3.X 版本。
-
进入项目，运行 “npm run serve”，运行结果如图 12-3 所示。
看到图 12-3 所示界面，说明已经成功安装 Vue3.X。
Vue3.X 的目录结构和 Vue2.X 的目录结构大体一致，但 main.js 文件发生改变。
Vue3.X 中的 main.js 代码如下。
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
createApp(App).use(store).use(router).mount('#app');
Vue2.X 中的 main.js 代码如下。
import Vue from 'vue';
import App from './App';
import router from './router';
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
});