一、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？
优势：
- 💡 极速的服务启动，使用原生 ESM 文件，无需打包
- ⚡️ 轻量快速的热重载，始终极快的模块热重载（HMR）
- 🛠️丰富的功能，对 TypeScript、JSX、CSS 等支持开箱即用
- 📦传统构建 与 vite构建对比图
（3）使用vite需要注意的地方
**兼容性注意：**Vite 需要 Node.js 版本 18+，20+。然而，有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。
（4）vite创建vue3
① 指定名字创建
- 使用
cnpm create vite vue3_demo001创建完的项目是没有安装依赖的，也没有安装插件
- 打开项目，安装依赖
cnpm install
- 运行项目
npm run dev或者pycharm配置运行项目
② 不指定名字创建
- 使用
cnpm create vue@latest创建可以自选插件的vue3项目，但还是不带依赖
（5）使用vite和vue3创建项目的文件简单解释
- main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
createApp(App).mount('#app') # 没有使用第三方插件
- HelloWorld.vue 组合式api写法，跟之前不一样了
<script setup>
import { ref } from 'vue'
defineProps({
msg: String,
})
const count = ref(0)
</script>
<template>
<h1>{{ msg }}</h1>
<div class="card">
<button type="button" @click="count++">count is {{ count }}</button>
</div>
</template>
- 后期我们可以自己引入 vuex，pinia，vue-router，代码需要自己写
- 以后在vue3上，建议使用pinia 做状态管理，pinia更适合组合式api的写法，而pinia和vuex是一个功能
