目录
Vue3
与vue2的区别
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
vue2
new Vue({
el:'app',
data:{}
})
vue3 写在setup中
let name= 'lxj'
let add=()=>{}
创建项目
使用vue-cli创建项目只需要在选择vue版本的时候选择 vue3
vite创建项目
创建项目速度快，其实是没有下载依赖，还得下载依赖
vite官方文档
https://cn.vuejs.org/guide/scaling-up/tooling.html#project-scaffolding
使用步骤
安装
npm init vue@latest
按需选择一些包。eg： vueRouter
切换到项目目录下载依赖
npm install
运行命令
npm run dev
setup函数
原来我们定义的变量都是写在data中，事件函数写在methods中，现在都可以写在setup中，一定要return出去。
有一个问题 就是失去了响应式，在我们编写的函数内部修改数据页面上并不会受影响。
<template>
<div class="home">
{{name}}
<button @click="click">点我弹年龄</button>
</div>
</template>
<script>
export default {
name: 'HomeView',
setup(){
//定义局部变量的方式
let name = 'lxj'
//定义常量 const
const age = 18
// 点击事件 函数都写在这里
let click=()=>{
alert(age)
}
// 所有变量或函数都需要return回去
return{name,click}
}
}
</script>
ref和reactive
这两个帮我们解决的响应式的问题。以后定义变量如果想用响应式就包裹起来，不想用就不包裹，节省资源
ref 通常用来包裹 数字，字符串类型。 变量名.value取值或修改。
reactive用来包裹数组或对象 xx.变量名
先导入
import {ref} from 'vue'
ref 使用方法
<template>
<div class="home">
{{name}}----{{age}}
<button @click="click">点我年龄+1</button>
</div>
</template>
<script>
// 导入
import {ref} from 'vue'
export default {
name: 'HomeView',
setup(){
// 只要被包裹了，就会变成RefImpl对象
let name = ref('lxj')
let age = ref(18)
let click=()=>{
// 变量名.value取值或修改
age.value = age.value + 1
}
// 所有变量或函数都需要return回去
return{name,age,click}
}
}
</script>
与配置项api的分别
在setup中定义的变量和函数，可以使用在配置项api里使用this.变量/函数 调用。
但是在配置项api里的变量/函数 无法在组合api的setup中使用this。
reactive使用方法
<template>
<div class="home">
{{userinfo.name}}----{{userinfo.age}}
<button @click="click">点我年龄+1</button>
</div>
</template>
<script>
// 导入
import {reactive} from 'vue'
export default {
name: 'HomeView',
setup(){
// 只要被reactive包裹了，就会变成Proxy
let userinfo=reactive({
name:'李晓健',
age:18,
})
let click=()=>{
console.log(userinfo)
// 不需要在+value了，直接 用对象.age
userinfo.age = userinfo.age + 1
}
// 所有变量或函数都需要return回去
return{click,userinfo}
}
}
</script>
计算属性和监听属性
计算属性
在Vue2中我们是在computed 的配置项中的写法。
Vue3提供了新写法
<template>
<div class="home">
<p>姓：<input type="text" v-model="person.firstName"></p>
<p>名：<input type="text" v-model="person.lastName"></p>
全名:{{fullName}}
<p>全名：<input type="text" v-model="fullName"></p>
</div>
</template>
<script>
//导入
import {computed, reactive} from 'vue'
export default {
name: 'HomeView',
setup(){
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)
}
})
return{person,fullName}
}
}
</script>
监听属性
<template>
<div class="home">
{{name}}
<button @click="click">点我名字+nb</button>
</div>
</template>
<script>
// 导入使用
import {ref,watchEffect,watch} from 'vue'
export default {
name: 'HomeView',
setup(){
let name = ref('lxj')
// 数据变化就会触发
watch(name,(newName,oldName)=>{
console.log(oldName)
console.log(newName)
alert('我被改了')
})
let click = ()=>{
name.value = name.value + 'nb'
}
// vue3 提供的watchEffect 也可以做监听属性用，只要它用的变量发生变化就会执行
watchEffect(()=>{
console.log(name.value)
})
return{name,click}
}
}
</script>
生命周期
-vue2 和 vue3比较
beforeCreate===>beforeCreate
created=======>created
beforeMount ===>beforeMount
mounted=======>mounted
beforeUpdate===>beforeUpdate
updated =======>updated
beforeDestroy ==>beforeUnmount
destroyed =====>unmounted
在vue3中生命周期写在setup里,本身的setup就自带了beforeCreate，created不需要在写。
vue2 vue3
beforeCreate===>setup()
created=======>setup()
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted
toRefs
可以直接使用setup的的变量。不需要.
<template>
<div class="home">
<h1> toRefs使用</h1>
{{name}}
<!--不使用toRefs的话就得用data.name-->
</div>
</template>
<script>
import {toRefs,reactive} from 'vue'
export default {
name: 'HomeView',
setup(){
let data = reactive({
name:'lxj',
age:'18',
})
// 解构赋值 可以传函数
return{...toRefs(data)}
}
}
</script>
vue后台模板介绍
# 公司内部项目，会写后台管理，往上有很多vue开源的后台管理的框架，咱们只需要在上面做二次开发
# django-vue-admin 前端---》D2Admin
# 若依：vue前端 用来 vue-element-admin
# elamin前端 drf 写了基于rbac权限管理的框架
"老刘写的，可以基于上面继续写"
# https://gitee.com/liuqingzheng/vue_admin