vue3的介绍
- 它是vue 项目的版本，现在一般的新项目使用的都是vue3，有的老的项目使用的还是vue2
vue3的变化
1. 性能上的提升
打包的大小减少了41%
初次渲染快了55%，更新渲染快了133%
内存减少了54%
2.源码
使用proxy代替defineProperty实现响应式
重写了虚拟DOM的事项hertree—Shaking
3.拥抱TypeScript
vue3可以更好的支持TypeScript
4.新的特性
Composition API （组合api）
setup 配置
ref和reactive
watch与watchEffect
provide与inject
新的内置组件
Fragment
Teleport
以及一些其他的改变
新的生命周期钩子
data 选项应始终被声明为一个函数
移除KeyCode支持作为 v-on 的修饰符
# 组合式API和配置项API
vue2：配置项API
new Vue({
el:'#app',
data:{}
})
vue3:组合式API
let name='小明'
let add=()=>{
}
vue3创建项目
使用vue-cli
# 创建项目和vue2是一样的，只是选择的版本是vue3
创建完成，使用pychram打开并运行就行
vite
- 这是一个新建的前端构建工具，最大的优势就是速度快
- 官网：https://cn.vuejs.org/guide/scaling-up/tooling.html#project-scaffolding
使用步骤：
安装：
npm init vue@latest
按需选择，VueRouter
-cd 到项目中执行cnpm install 把依赖装好
-运行： npm run dev
PS： 这里运行的 dev，我们可以到配置文件中修改成自己想要的命令
# VueRouter：跟之前是一样的
# Pinia是用来替换VueX的，新一代状态管理器
-链式调用
项目运行块的原因：
--创建项目的时候，没有将第三方依赖按安装好，需要我们运行项目时自己手动执行 npm install
--执行项目时热更新， 按需编译
setup 函数
概念：
setup是vue3中的一个新的配置项，值为一个函数，我们在组件中用到的数据、方法等等，都要配置在setup中。
- 它的目的就是能够让我们将项目做成最I简洁的
# vue 2 和 vue3 创建实例的区别：
vue 2：
new Vue()---- 是VUe的实例，里面有$store.$refs ...
vue 3:
createApp(app)---- 这是一个对象，对象里面有很多的东西，里面没有$store,$refs ...以后使用，都是直接导入使用
# 以后在文件中<template> 标签中不用只写一个标签了
# 之后的函数方法都是些在setup函数中，定义变量，定义函数，一定要记得return ，那样才能在templage中才能使用
ref 和reactive
- 由于我们所偶遇的方法函数都写在setup中，都是靠return出去的，这就导致了我们的界面失去了相应式，所以就有了接下来的方法、
ref reactive
ref 的使用
- 以后在定义变量的时候，如果想要有相应结果，就使用ref将数据包裹起来，再去修改变量，修改变量的时候使用
- ** 变量名.value **
- ref 通常用来包裹数字、字符串类型
# 在setup 中写配置项api和组合式api是可以混写的，但是不推荐
-vue 2的写法：在data中定义变量
-vue 3的写法：在setup中定义变量
总结：
在setup中定义的变量和函数，在之前的配置项api中是可以直接使用this.变量、函数 调用即可
在是在原来的的配置项中定义的变量、函数，在setup中是无法使用的
reactive 的使用
- reactive 用来包裹数组和对象类型
- 使用的时候直接通过点
.的方式用即可
总结：
- ref 定义数据：操作数据需要.value ,读取数据时模板中直接读取，不需要.value
- reactive 定义数据：操作数据与读取数据，均不用.value
toRefs
这个方法将上面的两个方法结合了；以后setup的返回值直接使用即可
setup(){
let data=reacive({
name:'张三'，
age:18,
})
return {...toRefs(data)}
}
# 之后在模板中使用的时候直接用即可 {{name}}
script setup的作用和lang=ts
# 以后在是script中加入setup ，就可以直接在script中直接写函数，不用写return了
<script setup>
import {ref} from 'vue'
let name = ref('小明')
let handleClick = () => {
alert('美女')
}
</script>
#lang=ts
里面就能够写ts代码，而ts完全兼容js，继续写js代码是没有问题滴
vue后台管理模板
# 一般公司内部的项目，都需要使用到后台管理，网上哟许多的开源的后台管理的框架，而我们要做的就是在原来的基础上坐二次开发
django-vue-admin ： 前端使用的是D2Admin
若依： 前端使用得是vue-element-admin
elamin前端： drf写了基于rbac权限管理的框架
https://gitee.com/liuqingzheng/vue_admin
vue3的生命周期函数
和vue2 相比较
beforeDestroy ==>beforeUnmount
destroyed =====>unmounted
除了这两个，其他的是一样的
以后钩子函数配置项在都写在setup中
beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted
# 以前写在created中的代码，现在直接写在setup开始即可
let show = ref(false)
axios.get().then(res=>{
show.value=res.data.show
})
计算属性和监听属性
计算属性
# computed 的配置项中的写法，不建议用了
computed:{
fullName(){
return this.firstName+this.lastName
}
},
# vue3 新写法
let person = reactive({
firstName: '',
lastName: '',
})
let fullName = computed(() => {
return person.firstName + person.lastName
})
# 计算属性取值和修改值
let fullName = computed({
get() {
return person.firstName + person.lastName
},
set(value) {
person.firstName = value.slice(0, 1)
person.lastName = value.slice(1)
},
})
监听属性
# 组合式api写法，只要name发生变化，就会触发匿名函数执行
let name = ref('lqz')
watch(name, (newName, oldName) => {
console.log('name变了')
console.log('老的', oldName)
console.log('新的', newName)
})
# watchEffect 用法，只要age变化，就会执行，age不变化，就不会执行
watchEffect(() => {
console.log(age.value)
})