一、vue3介绍
1、为什么要学习vue3？
vue3的变化：
首先vue3完全兼容vue2，但是vue3不建议用vue2的写法；其次，vue3拥抱TypeScript，之前vue2使用的JavaScript，ts完全兼容js
最后之前学的vue2 是配置项api，而vue3是组合式api
optionsAPI(旧) => compositionAPI（新）, 效果: 代码组织更方便了, 逻辑复用更方便了 非常利于维护!!
vue3新特性：
-
数据响应式原理重新实现 (ES6 proxy 替代了 ES5 的 Object.defineProperty)
-
解决了: 例如数组的更新检测等bug, 大大优化了响应式监听的性能 ---覆写
-
(原来检测对象属性的变化, 需要一个个对属性递归监听) proxy 可以直接对整个对象劫持
-
虚拟DOM - 新算法 (更快 更小)
-
提供了composition api, 可以更好的逻辑复用
-
模板可以有多个根元素
-
源码用 typescript 重写, 有更好的类型推导 (类型检测更为严格, 更稳定)
-
废弃了 eventbus 过滤器
官方文档：
- vue3官方文档：Vue.js - The Progressive JavaScript Framework | Vue.js
- vue3中文文档：Vue.js
小结： vue3 性能更高, 体积更小, 更利于复用, 代码维护更方便
2、配置项api与组合式api快速体验
（1）配置项api
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style></style>
</head>
<body>
<div id="app">
<p>{{count}}</p>
<br>
<button @click="handleAdd">点我加1</button>
</div>
</body>
<script>
let app=Vue.createApp({
data(){
return {
count:100
}
},
methods:{
handleAdd(){
this.count++
}
}
})
app.mount("#app")
</script>
</html>
（2）组合式api
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<style></style>
</head>
<body>
<div id="app">
<p>{{count}}</p>
<br>
<button @click="handleAdd">点我加1</button>
</div>
</body>
<script>
let app=Vue.createApp({
setup() {
let count=Vue.ref(0)
let handleAdd=()=>{
count.value++
}
return {
count,
handleAdd
}
},
})
app.mount("#app")
</script>
</html>
（3）API风格
- 选项式API(配置项api)，也就是之前vue2中用的用法
Vue.createApp({
data:function(){},
methods:{}，
watch：{}
# 同一个功能的代码，分到不同地方，代码越多，越乱
})
- 组合式API，之后vue3中的用法
Vue.createApp({
setup() {
# 所有代码写在这里面
# 变量，函数，监听属性，生命周期
# 同一个功能的代码，会在一起
}
})
- 如果当你打算用 Vue 构建完整的单页应用，推荐采用组合式 API + 单文件组件
（4）拥抱TypeScript
- 之前学习vue2的时候用的都是js代码，在vue3既可以使用js也可以使用ts
- ts是由微软推出的，但是最终也还是要被编译成js才能运行在浏览器中
- 如果使用ts写，可以避免很大错误，因为ts是js的超集，ts完全兼容js，也优化了js的一些问题
二、vue3项目创建和启动
1、 vue-cli创建
- 这种创建方式已经被官方不推荐使用了
- 官方文档：https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create
## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建
vue create vue3_demo001
## 启动
cd vue3_demo001
npm run serve
- 如果没有配置cnpm的话，也可以配置直接配置npm的镜像站，效果是一样的
# 配置npm镜像站
npm config set registry https://registry.npmmirror.com
# 查看npm镜像站
npm config get registry
2、使用vite创建（推荐）
这种方式目前是官方推荐使用的，Vite 官方文档：Vite | 下一代的前端工具链
（1）什么是vite？
Vite（法语意为 "快速的"，发音 /vit/，发音同 "veet"）是一种新型前端构建工具，能够显著提升前端开发体验。它的工作流程与传统方式不同：
-
传统方式：webpack启动项目 -> webpack进行打包编译->将打包的结果交给浏览器 ->浏览器运行
- 先抓取并构建你的整个应用，然后才能提供服务。
- 更新速度会随着应用体积增长而直线下降。
-
vite 方式：vite启动项目 -> 将打包编译的工作交给了浏览器->浏览器直接解析业务
- Vite 以 原生 ESM 方式提供源码。这实际上是让浏览器接管了打包程序的部分工作。
- Vite 只需要在浏览器请求源码时进行转换并 按需提供源码。
- 根据情景动态导入代码，即只在当前屏幕上实际使用时才会被处理。
（2）为什么使用vite？
优势：