前言 ... 目标
1 vue3的优势有哪些 2 如何创建vue3工程
graph LR
A[初始vue3] --> B[vue3带来了什么]
A --> C[如何创建vue3工程]
A --> D[如何引入vue3]
一 vue3带来了什么
从vue2到vue3一个大版本的升级，必然会有一些性能上的优化 性能提升和源码升级
| 性能提升 | 源码升级 |
|---|---|
| 打包大小减少 | 使用Proxy代替defineProperty实现响应式 |
| 初次渲染快，更新渲染快 | 重写虚拟DOM的实现和Tree-Shaking） |
| 内存减少 |
拥抱TypeScript Vue3可以更好的支持TypeScript 一些新的特性
| Composition API (组合API) | 新的内置组件 |
|---|---|
| setup配置 | Fragment |
| ref与reactive | Teleport |
| watch与watchEffect | Suspense |
| provide与inject |
其他改变 新的生命周期钩子 data选项应始终被声明为一个函数 移除keyCode支持作为v-on的修饰符
二 创建Vue3.0工程
1 使用vue-cli创建
查看版本
vue -V 创建vue3工程 vue-cli 版本要4.5以上的版本
更新Vue CLI到最新版本
npm install -g @vue/cli
创建项目
vue create < project-name>
选择vue3
创建完成
进入项目
cd < project-name>
安装依赖
npm i
运行项目
npm run serve
2 使用vite创建
vite是什么？，在vite官网上给的定义是“新一代前端开发与构建工具”
构建工具这个名词很熟悉吧，开发中常用的构建工具==webpack==（grunt、gulp也是构建工具，但是不常用），但是vite上线之后，webpack也只能逐渐的成为 旧一代的前端构建工具了
为什么这么说呢，vite有很多传统构建工具没有的优势
1 开发环境中，无需打包操作，可快速的冷启动 2 轻量快速的热重载（HMR） 3 真正的按需编译，不在等待整个应用编译完成
传统构建与vite构建工具的打包方式
webpack传统构建方式：根据路由找到下面的所有的依赖模块，都准备好后进行打包 最后启动服务。 比较慢
vite构建工具打包方式：先启动服务，根据接口访问路由，进行打包。速度很快，几乎是几秒就启动好了
创建工程 npm i vite-app < project-name>
进入工程 cd < project-name>
安装依赖 npm i
运行 npm run dev
3 总结
使用vue-cli和vite创建区别
| 分类 | 区别 |
|---|---|
| 工程目录 | 目录有略微的不同 |
| 使用语法 | 一样的都用的Vue3语法 |
| 打包速度 | vite创建的工程更快 |
三 引入vue3
回顾一下vue2的引入写法
// 引入vue构造函数
import Vue from 'vue';
const vm = new Vue({
render: h => h(App)
})
// 挂载
vm.$mount('#app')
vue3引入写法
vue2中直接用的构造函数去引入创建Vue，但是vue3中提供了一个createApp的工厂函数，可以直接使用createApp去创建应用实例对象
// 引入createApp 工厂函数
import { createApp } from 'vue'
import App from './App.vue'
// 创建应用实例对象，类似vue2中的vm 但是比vm轻
const app = createApp(App)
// 挂载
app.mount('#app')
扩展知识
createApp支持多个应用
应用实例并不仅限于一个App应用，createApp API 允许你在同一个页面中创建多个共存的 Vue 应用，而且每个应用都拥有自己的用于配置和全局资源的作用域。
const app1 = createApp({
/* ... */
})
app1.mount('#app-1')
const app2 = createApp({
/* ... */
})
app2.mount('#app-2')
参考 vue3中文文档
