vue3

1 vue3 介绍

# 1 vue项目的版本，新项目使用vue3，有部分老项目使用vue2

# 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=()=>{ 
        }

2 vue3 创建项目

2.1 使用vue-cli

# 创建跟之前vue2 一样，只是选择vue版本的时候，选择vue3

# 创建完成，使用pycharm打开，并运行

2.2 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的，新一代的状态管理器
    -链式调用（抽时间）
    
    
    
# 为什么这么快
	-创建项目快----》不安装第三方依赖
    -执行项目，热更新----》按需编译

3 setup函数

# 把项目做成最简洁的

# vue2的创建vue实例和vue3创建vue实例的区别

	-new Vew()---->是Vue的实例，里面有$store,$refs...
    -createApp(App)--->是个对象，对象里有东西，没有$store,$refs...，以后有用，都是导入使用

    
# 以后vue3 的<template>，不需要写一个标签了


# 以后都写在setup函数中，定义变量，定义函数，一定要return，在templage中才能使用
# 但是失去了响应式

4 ref和reactive

# 有响应式
	-以后定义变量，如果想有响应式就用 ref包裹起来，在修改变量，需要用变量名.value修改
 
# 配置项api和组合式api可以混写，不建议
	-以前在data中定义的变量
    -在setup中定义的变量
    
    -总结：
    	在setup中定义的变量和函数，在之前配置项api中可以直接使用this.变量，函数调用即可
        但是在原来配置项中定义的变量，函数，在setup中无法使用this
        
# 不同类型做响应式
	ref通常用来包裹 数字，字符串类型，以后使用 xx.value
    reactive用来包裹数组和对象类型  以后使用  直接用即可
    
# 总结
ref 定义的数据，操作数据需要value，读取数据时模板中直接读取不需要.value
reactive定义的数据：操作数据与读取数据，均不需要.value

5 计算属性和监听属性

5.1 计算属性

# 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)
        },
    })

5.2 监听属性

# 组合式api写法，只要name发生变化，就会触发匿名函数执行
	let name = ref('guts')
    watch(name, (newName, oldNaem) => {
        console.log('name变量')
        console.log('老的', oldName)
        console.log('新的', newName)
    }) 
# watchEffect 用法，只要age变化，就会执行，age不变化，就不会执行
	watchEffect(() => {
        console.log(age.value)
    })

6 生命周期

# 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
})

7 toRefs

# 以后setup的返回值可以直接使用
	setup() {
        let data = reactive({
            name: 'guts',
            age: 22,
            gender: '男'
        })
        return {...toRefs(data)}
    }
# 以后再模板中直接用  {{name}}

8 script setup的作用和lang=ts

<script setup>
import {ref} from 'vue'
let name = ref('guts')
let handleClick = () => {
    alert('美女')
}
</script>

# 以后这个script中的代码直接放到 setup函数中，不用return了

#lang=ts
里面代码使用ts写，而ts完全兼容js，继续写js代码没问题

9 vue后台管理模板

# 公司内部项目，会写后台管理，往上有很多vue开源的后台管理的框架，咱们只需要在上面做二次开发

# django-vue-admin 前端---》D2Admin 
# 若依：vue前端  用来   vue-element-admin
# elamin前端   drf  写了基于rbac权限管理的框架

# https://gitee.com/liuqingzheng/vue_admin