11.2内容整理和概述
今日内容概要
内容目录
- Vue3升级简介
- 创建Vue3项目
- setup函数+ref+reactive
- Vue3计算属性
- Vue3监听属性
- Vue3的生命周期
- hooks
- toRefs
- 后台管理模板
- 战略补充
Vue3升级简介
性能提升：
1.打包大小减少41%
2.初次渲染快55%, 更新渲染快133%
3.内存减少54%
源码升级：
1.使用Proxy代替defineProperty实现响应式
2.重写虚拟DOM的实现和Tree-Shaking # Tree-Shaking：优化代码
拥抱TypeScript：
1.Vue3可以更好的支持TypeScript
新特性：
1.Composition API（组合API）：
1.setup配置
2.ref与reactive
3.watch与watchEffect
4.provide与inject
2.新内置组件：
1.Fragment
2.Teleport
3.Suspense
3.其他：
1.新的生命周期钩子
2.data选项应始终被声明为一个函数
3.移除keyCode支持作为v-on的修饰符
# 建议看Vue3文档，文档记得最全
创建Vue3项目
方式一：
脚手架：vue-cli
流程：和Vue2流程一样
方式二：
脚手架：vite # vue3项目推荐
流程：
方式一：
1.无需安装脚手架，直接创建项目：npm init vue@latest
2.输入y-->准备好了
3.输入项目名
4.选择是否增加ts的支持
5.选择是否增加Vue Router(路由)的支持 # 建议增加
6.选择是否增加Pinia的支持 # Pinia：类似vuex，功能更强
7.选择是否增加vitest支持 # 不知道啥玩意，就填no
8.选择是否增加end-to-end支持 # 不知道啥玩意，就填no
9.选择是否增加ESLint的支持 # 不知道啥玩意，就填no
10.项目创建完成
11.安装依赖：npm install
12.运行项目：npm install
12.运行项目：npm run dev
方式二： # 比较老
1.创建项目：npm init vite-app <项目名>
2.项目创建完成
3.安装依赖：pm install
4.运行：npm run dev
补充：当前方法创建Vue项目版本较低
setup函数+ref+reactive
setup：
定义： 是vue新增的setup配置项函数，以后所有的变量和函数在此方法中定义 # 替代data,methods
特点：
1.可以定义变量
2.可以定义函数
3.在模板中使用的函数或变量，必须return出去
4.setup没有this这个变量
参数：
本质：上下文，替代this的功能,用于拿取数据
例子：setup(context) {context.name}
代码案例：
<script>
export default {
name: 'App',
setup() {
let age = 19
let name = 'lqz'
function handleClick() {alert('美女~~~')}
let handleAdd = () => {
console.log('我要开始加了')
age=age+1
console.log(age)
}
return {
age, name, handleClick, handleAdd
}
}
}
</script>
# 不确定能不能这么写
<script setup>
let age = 19
let name = 'lqz'
function handleClick() {alert('美女~~~')}
let handleAdd = () => {
console.log('我要开始加了')
age=age+1
console.log(age)
</script>
ref+reactive：
使用背景：只用setup函数渲染数据只能刷新数据，不能实现双向绑定
解决方案：使用ref+reactive
使用范围：
ref：基本数据对象 # 建议如此使用，ref也支持数组和对象，但是麻烦
reactive：数组+对象
ref使用步骤：
1.导入：import {ref, reactive} from 'vue' # setup函数存在的组件界面中
2.将需要响应的基本数据类型的数据传入ref函数中 # 例子：let age = ref(19)
3.调用了ref函数的数据变量在底层被封装成了RefImpl对象，数据被放在了对象的data属性中
4.模板区调用数据可以直接使用变量或者变量.data
ref代码案例：
export default {
name: 'App',
setup() {
let age = ref(19)
let name = ref('lqz')
let handleAdd = () => {
age.value = age.value + 1
}
function handleChangeName(){
name.value=name.value+'?'
console.log(name)
}
return {
age, name, handleClick, handleAdd,handleChangeName
}
}
}
reactive使用步骤：
1.导入：import {ref, reactive} from 'vue' # 当前位置：setup函数存在的组件界面中
2.将需要响应的对象或数组的数据传入reactive函数中 # 例子：let person = reactive({'name':'lwy','age':18})
3.被reactive封装后的对象使用方法不变，直接对象.属性，不需要像ref对象使用value属性 # 例子：person.age++
Vue3计算属性
Vue2的计算属性写法：
omputed: {
fullName() {
return firstName.value + lastName.value
}
Vue3的计算属性写法：
let fullName = computed(() => {
return firstName.value + lastName.value
})
老刘案例：
person.fullName = computed({
get() {
return person.firstName + '-' + person.lastName
},
set(value) {
console.log(value)
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
})
return {
person
}
Vue3监听属性
Vue2的监听属性写法：
watch: {
type(val) {
console.log('修改后变成了，', val)
console.log('向后端加载数据了')
}
}
Vue3的监听属性写法：
watch(name, (newValue, old) => { # old：name修改之前的数据；newValue：name修改之后的数据
console.log('name变了')
console.log(old)
console.log(newValue)
})
新增监听属性：
方法：watchEffect
功能：只要函数中使用的变量发生变化，它就会触发 # 可以监听多个变量和方法
案例：
watchEffect(() => {
let a = name.value + '?'
console.log('watchEffect配置的回调执行了')
})
Vue3的生命周期
Vue3生命周期钩子函数：
1.beforeCreate：创建Vue实例之前调用 # data,el属性都不存在
2.created：创建Vue实例成功后调用 # 可以在此处发送异步请求后端数据，说明data属性已经存在，el属性不存在
3.beforeMount：渲染DOM之前调用 # data属性存在，el属性不存在
4.mounted：渲染DOM之后调用
5.beforeUpdate：重新渲染之前调用
6.updated：重新渲染完成之后调用
7.beforeUnmount：销毁之前调用 # Vue2：beforeDestroy
8.unmounted：销毁之后调用，用于清理资源的工作 # Vue2：destroyed
Vue3 Composition API 形式的生命周期钩子： # 需要导入
beforeCreate===>直接在setup()编写
created=======>直接在setup()编写
beforeMount ===>onBeforeMount
mounted=======>onMounted
beforeUpdate===>onBeforeUpdate
updated =======>onUpdated
beforeUnmount ==>onBeforeUnmount
unmounted =====>onUnmounted
hooks
本质：一个函数，把setup函数中使用的Composition API进行了封装 # 类似vue2中的mixin组件
功能：复用代码, 让setup中的逻辑更清楚易懂
使用步骤：
1.创建新的文件夹和js文件
2.在js文件中编写复用的变量和函数，并导出
3.在使用的组件中导入并命名 # import usePoint from '../hook/uesPoint.js'
4.调用命名的函数并用变量接收 # let p = usePoint()
toRefs
功能：return返回对象数据时，可以实现解压赋值
代码案例：
setup() {
let data = reactive({
name: 'lqz',
age: 19,
isShow: true
})
function handleShow() {
console.log('ssdaf')
data.isShow = !data.isShow
data.age++
}
return {
...toRefs(data),
# 上一句 = name:data.name,age:data.name,isShow:data.name
handleShow
// data
}
}
后台管理模板
vue-elementui-admin： # vue2写的
1.不建议二次开发
2.二次开发建议vue-admin-template
修改："dev": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service serve", # 当前位置：package.json
Java：若依，带权限控制的后台管理模块 # 也是基于vue-elementui-admin的
python：django-vue-admin
go：gin-vue-admin
战略补充(模板补充+Vue3组件导入+bom操作补充)
模板补充：
1.Vue3模板的html语言不需要全部都放在一个div标签中了
2.Vue2模板的html语言必须全部都放在一个div标签中
Vue3组件导入：需要在路径后加入.vue，不然报错 # 例子：import hello from "./components/hello.vue"
bom操作：
window.addEventListener：
功能：增加监听事件
运用：window.addEventListener('click', getPoint) # 鼠标点击，触发getPoint函数
window.removeEventListener：
功能：移除监听事件
运用：window.addEventListener('click', getPoint) # 移除当前监听事件
浙公网安备 33010602011771号