# 一、vue3 简介
# 1、概要
2020 年 9 月 18 日，Vue.js 发布 3.0 版本，代号：One Piece（海贼王）。
vue3 第一次发布：
github 地址：v3.0.0 One Piece (opens new window)
# 2、改变
简单的来说，相比 vue2 有以下改变：
- 性能的提升
（打包大小减少、渲染速度更快、内存减少……）
- 源码的升级
（使用 Proxy 代替 defineProperty 实现响应式、重写了虚拟 DOM 的实现……）
- 拥抱 TypeScript
Vue 3 的代码库是用 TypeScript 编写的
# 3、新特性
关于 vue3 的新特性如下：
- Composition API（组合 API）
setup 配置、ref 与 reactive、watch 与 watchEffect、provide 与 inject ……
- 新的内置组件
Fragment、Teleport、Suspense
- 其他改变
新的生命周期钩子、data 选项必须为函数、
# 二、项目构建
# 1、webpack
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具
当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个 依赖图(dependency graph)，然后将你项目中所需的每一个模块组合成一个或多个 bundles，它们均为静态资源，用于展示你的内容。
# 2、vite
vite 是尤雨溪在开发 vue3 的时候推出的基于原生 ES-Module 的构建工具。
官网介绍说：vite 是下一代的前端工具链，为开发提供极速响应。
优势如下：
- 开发环境中，无需打包操作，可快速的冷启动
- 轻量快速的热重载（HMR）
- 真正的按需编译，不再等待整个应用编译完成
- ……
构建项目：
npm create vite@latest
注意
Vite 需要 Node.js 版本 14.18+，16+
# 3、vue-cli ✨
vue 官方的 Vue.js 开发标准工具。
构建项目：
# 基于webpack构建
vue create <projectName>
说明
vue-cli 官方网站已经处于维护状态，并且官方更加推荐使用 create-vue 来创建基于 Vite 的新项目。
# 4、vue create
目前，基于 vite 的构建工具项目create-vue (opens new window)已经发布。
# 基于vite构建
npm create vue@2
npm create vue@3
并且，在最新的 vue3 官网中，明确说明了它提供的指令就是安装并执行了 create-vue：
提示
和基于 vue-cli 构建的 vue3 项目不同，基于 create-vue 构建的项目默认使用的是 😘 组合式 API 和 <script setup>，而非选项式 API。
请注意，生成的项目中的示例组件使用的是
npm init vue@latest
# 三、非单文件中
- vue2
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="app">{{ message }}</div>
<script>
new Vue({
el: '#app'
//
})
</script>
- vue3
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div id="app">{{ message }}</div>
<script>
import { createApp } from 'vue'
createApp({
//
}).mount('#app')
</script>
# 四、项目结构
下面我们的对所有 vue-cli 构建的 vue2 和 vue3 项目进行比较。
# 1、main.js
- vue2
// 引入的是构造函数
import Vue from 'vue'
import App from './App.vue'
// 创建一个vm
new Vue({
router,
store,
render: (h) => h(App)
}).$mount('#app')
通过打印，我们发现，vue3 的应用实例对象 app 比 vue2 应用实例对象要“轻”
- vue3
// 引入的是createApp工厂函数
import { createApp } from 'vue'
import App from './App.vue'
// 创建一个app
createApp(App).use(store).use(router).mount('#app')
# 2、App.vue
vue3 中的<div id="app"></div>可以省略，但实际存在。
<template>
<!-- <div id="app"> -->
<nav><router-link to="/">Home</router-link> | <router-link to="/about">About</router-link></nav>
<router-view />
<!-- </div> -->
</template>
# 3、store 文件
- vue2
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//
})
- vue3
趋势：从
class 类，改为了函数式
import { createStore } from 'vuex'
export default createStore({
//
})
# 4、router 文件
- vue2
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
export default new VueRouter({
routes: [
//
]
})
- vue3
趋势：从
class 类，改为了函数式
import { createRouter } from 'vue-router'
export default createRouter({
routes: [
//
]
})