今日内容
vue3介绍
# 1 vue项目的版本 新项目使用vue3 有部分来项目使用2
# 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和配置项
vue2: 配置项API
new Vue({
el:'#app',
data:{}
})
vue3: 组合式API
let name='lqz'
let add=()=>{}
vue3创建项目
1 使用vue-cil
# 与创建vue2是一样的 选中Vue3即可
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的 新一代的状态管理器
-链式调用
# 快的原因:
-创建项目快----> 不安装第三方依赖
-执行项目不再是热更新 而是按需编译
setup函数
# 把项目做成最简洁的
# vue2的创建vue实例和vue3创建vue实例的区别
-new Vew()---> 是Vue的实例,里面有$store,$refs....
-createApp(App)--->是个对象 对象里面有东西 没有 $store等 以后有用就需要导入使用
# 以后vue3 的<template> 不需要写一个标签
# 以后都写在setup函数中 定义变量 定义函数 一定要return 在templage才能使用
# 但是失去了响应式
export default {
name: 'HelloWorld',
setup(){
let name ='cyf'
let age = '99'
return {name,age}
}}
"""定义再setup中的可以是变量 方法 在根组件中可以直接使用 但是要return出来"""
ref和reactive
# 有响应式
-以后定义变量 如果想有响应式就用 ref包裹起来 再修改变量 需要用 变量名.value 修改
# 配置项api和组合式api可以缩写 但是不建议
-在前在data中定义的变量
-在setup中定义的变量
-总结:
在setup中定义的变量和函数，在之前配置项api中可以直接使用this.变量，函数调用即可
但是在原来配置项中定义的变量，函数，在setup中无法使用
# 不同类型做响应式
ref通常用来包裹 数字 字符串类型 以后使用 xx.value
reactive用来包裹数组和对象类型 以后使用 直接用即可
# 总结
ref定义的数据: 操作数据需要.value 读取数据时模板中直接读取不需要.value
reactive定义的数据:操作数据与读取数据:均不需要.value (对象)
计算属性和监听属性
1 计算属性
# computed 的配置项中的写法 不建议使用
computed:{
fullName(){
return this.firstName+this.lastName
}
}
# vue3新写法
let userInfo = reactive({
firstName:'',
lastName:'',
})
let fullName = computed(()=>{
return userInfo.firstName + userInfo.lastName
})
# 计算属性取值和修改值
let fullName = computed({
get(){
return userInfo.firstName + userInfo.lastName
},
set(args){
userInfo.firstName = args.slice(0,1)
userInfo.lastname = args.slice(1)
}
})
"""
computed 也是需要外部导入的
get对应的是 获取fullName的值时会触发
set对应的是 修改fullName的值就会触发
"""
2 监听属性
# 组合式api写法 只要name发生变化 就会触发匿名函数执行
let name = ref('xiaochen')
watch(name,(newName,oldName)=>{
console.log('老的',oldName)
console.log('新的',newName)
})
"""
watch的三个参数对应的是 所监听的属性 变化后的属性 变化前的属性
(括号内的变量名可随意命名)
"""
# watchEffect 用法 只要age变化 就会执行 age不变化 就不会执行
watchEffect(()=>{
console.log(age.value)
})
"""
只要是写在watchEffect里面的变量都会检测 只要发生变化就会执行
"""
生命周期
# 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的返回值可以直接使用
<template>
<div class="about">
<h1>This is an about page</h1>
{{name}}
{{age}}
</div>
</template>
<script>
import {reactive, toRefs} from "vue";
export default {
name:'AboutView',
setup(){
let data = reactive({
name: 'lqz',
age: 19,
gender: '男'
})
return {...toRefs(data)}
}
}
</script>
script setup的作用和lang=ts
# 以后 这个script中的代码会自动放到 setup函数中 不用return
# lang=ts
里面艾玛使用ts写(ts完全兼容js)
<script setup>
import {ref} from 'vue'
let name = ref('小陈')
let handleClick = () => {
alert('美女')
}
</script>
<template>
<div class="about">
{{name}}
<button @click="handleClick">点我看美女</button>
</div>
</template>
vue后台管理模板
# 公司内部项目，会写后台管理，往上有很多vue开源的后台管理的框架，咱们只需要在上面做二次开发
# django-vue-admin 前端---》D2Admin
# 若依：vue前端 用来 vue-element-admin
# elamin前端 drf 写了基于rbac权限管理的框架
# https://gitee.com/liuqingzheng/vue_admin
浙公网安备 33010602011771号