vue3介绍
vue3的变化
1.性能的提升
打包大小减少41%
初次渲染快55%，更新渲染快133%
内存减少54%
2.源码的升级
使用Proxy代替defineProperty实现响应式
重写虚拟DOM的实现和Tree-Shaking
3.拥抱TypeScript
Vue3可以更好的支持TypeScript
4.新的特性
Composition API(组合API)
setup配置
ref与reactive
watch与watchEffect
provide与inject
新的内置组件
Fragment
Teleport
Suspense
其他改变
新的生命周期钩子
data 选项应始终被声明为一个函数
移除keyCode支持作为 v-on 的修饰符
组合式API和配置项API
vue2： 配置项API
new Vue（{
el：'#app',
data:{}
}）
vue3:组合式API
let name='lqz'
let add=()=>{
}
创建vue3项目
使用vue-cliv创建
cmd 中 切换路径 执行vue create 项目名
选择vue版本时选择vue3
创建完成，使用pycharm打开，执行npm run serve运行
vite创建
新建的前端构建工具 最大的优势就是速度快
https://cn.vuejs.org/guide/scaling-up/tooling.html#project-scaffolding
使用步骤：
安装:npm init vue@latest
按需选择： vueRouter
cd到项目中执行cnpm install 把依赖装好
运行：npm run dev
vueRouter：跟之前一样
Pinia：用来替换Vuex的，新一代的状态管理器
链式调用
速度快的原因
创建项目快 不安装第三方依赖（创建完成后自己再安装）
执行项目 热更新 按需编译
srtup
把项目做成最简洁的
vue2的创建vue实例和vue3v创建vue实例的区别
new Vue（）----》 是Vue的实例 里面有 $store,$refs...
createApp(App)---》是个对象 对象里有东西，没有$store,$refs...以后有用，都是导入使用
以后vue3 的<template>,不需要写一个标签了
以后都写在setup 函数中，定义变量，定义函数，一定要return 在template中才能使用
但是失去了响应式
ref和reactive
有响应式
以后定义变量，如果想有响应式就用，ref包裹起来，再修改变量 ，需要用 变量名.value x修改
配置项 api和组合式api可以混写 不建议
在data中定义的变量
在setup中定义的变量
总结：
在setup中定义的变量和函数，在之前配置项api中可以直接使用过this.变量，函数调用即可
但是在原来配置项中定义的变量，函数，在setup中无法使用
不同类型做响应式
ref通常用来包裹，数字，字符串类型，以后使用xxx.value
reactive用来包裹数组和对象类型 以后使用 直接用即可
总结：
ref定义的数据：操作数据需要.value,读取数据时模板中直接读取不需要.value
reactive定义的数据，操作数据与读取数据：均不需要.value
计算属性和监听属性
计算属性
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)
}）
生命周期
vue3的变化
vue2 和 vue3 比较
beforeCreate===>beforeCreate
created=======>created
beforeMount ===>beforeMount
mounted=======>mounted
beforeUpdate===>beforeUpdate
updated =======>updated
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
})
toRefs
以后setup的返回值可以直接使用
setup（）{
let data = reactive（{
name：'lqz',
age:19,
gender:'男'
}）
return {...toRefs(data)}
}
以后在模板中直接用{{name}}
script setup的作用和lang=ts
<script setup>
import {ref} from 'vue'
let name = ref('lqz')
let handleClick = () => {
alert('美女')
}
</script>
以后这个script中的代码直接放到 setup函数中，不用return了
lang=ts
里面代码使用ts写，而ts完全兼容js 继续写js代码没问题
vue后台管理模板
# 公司内部项目，会写后台管理，往上有很多vue开源的后台管理的框架，咱们只需要在上面做二次开发
# django-vue-admin 前端---》D2Admin
# 若依：vue前端 用来 vue-element-admin
# elamin前端 drf 写了基于rbac权限管理的框架
# https://gitee.com/liuqingzheng/vue_admin