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