一、Vue3的基本语法及使用
1.Vue3的基本语法
1.1 初识setup
1.2 ref
-
ref 通常用来定义响应式基本数据类型，还可以获取页面元素
<input type="text" ref="inputText">
// 获取该input元素
onMounted(()=>{
// inputText要跟元素中的ref一样
const inputText = ref<HTMLElement | null>()
console.log(inputText.value)
})
-
语法：const xxx=ref(initValue)
-
js中操作数据：xxx.value（必须使用.value方式操作数据，否则不会生效）
1.3 reactive
1.4 reactive 与 ref 对比
1.4.1 从定义数据角度对比：
1.4.2 从原理角度对比：
1.4.3 从使用角度对比：
1.5 Vue3响应式原理
1.6 Vue3中的计算属性和监视
1.6.1 computed函数
import {computed} from 'vue'
person.fullName=computed({
get(){
return person.firstName+'-'+person.lastName
},
set(value){
const nameArr=value.split('-')
person.firstName=nameArr[0]
person.lastName=nameArr[1]
}
})
1.6.2 watch函数
watch函数可以传递三个参数，第一个参数是监视的属性，第二个参数是执行的回调函数，第三个参数是配置
//情况一：监视ref所定义的一个数据
// 注意：1、immediate开启立即执行一次 2、deep开启深度监视
watch(sum,(newValue,oldValue)=>{
console.log('sum变了',newValue,oldValue);
},{immediate:true})
//情况二：监视ref所定义的多个响应数据
watch([sum,msg],(newValue,oldValue)=>{
console.log('sum变了huomsg变了',newValue,oldValue)
})
//情况三：监视reactive所定义的一个响应式数据 的全部属性
// 注意：1、无法正确的获取oldValue 2、强制开启了深度监视（deep配置无效）
watch(person,()=>{
console.log('person变化了');
})
//情况四：监视reactive所定义的一个响应式数据中的某个属性
// 注意：所监视的属性写法要用函数返回 ()=>person.age
watch(()=>person.age,(newValue,oldValue)=>{
console.log('age变化了',newValue,oldValue);
})
//情况五：监视reactive所定义的一个响应式数据中的某些属性
// 注意：可以监视多个属性，用数组表示，同时如果所监视的属性写法要用函数返回 ()=>person.age
watch([()=>person.age,()=>person.name],(newValue,oldValue)=>{
console.log('age,name变化了',newValue,oldValue);
})
1.6.3 watchEffect函数
不需要配置immediate，本身默认会执行一次
import { watchEffect } from 'vue'
watchEffect(()=>{
const names = fullName.value.split('_')
user.firstName = names[0]
user.lastName = names[1]
})
1.7 vue3生命周期
-
onBeforeMount：挂载前
-
onMounted：挂载后
-
onBeforeUpdate：更新前
-
onUpdated：更新后
-
onBeforeUnmount：卸载前
-
onUnmounted：卸载后
1.8 toRefs
toRefs可以把一个响应式对象转换成普通对象，该普通对象的每个property都是一个ref，可以帮我们批量创建ref对象主要是方便我们解构使用
import { reactive, toRefs } from 'vue'
const obj = reactive({
foo: 1,
bar: 1
})
let { foo, bar } = toRefs(obj)
foo.value++
console.log(foo, bar);
1.9 toRef
只对响应式对象有效果
-
为源响应式对象上的某个属性创建一个ref对象，二者内部操作的是同一个数据值，更新时二者是同步的
-
区别ref：拷贝了一份新的数据值单独操作，更新时相互不影响
-
应用：当要将某个prop的ref传递给复合函数时，toRef很有用
<template>
<div>
<button @click="change">按钮</button>
{{state}}
</div>
</template>
<script setup lang="ts">
import { reactive, toRef } from 'vue'
const obj = {
foo: 1,
bar: 1
}
const state = toRef(obj, 'bar')
// bar 转化为响应式对象
const change = () => {
state.value++
console.log(obj, state);
}
</script>
1.10 shallowReactive 和 shallowRef
1.11 readonly 和 shallowReadonly
1.12 toRaw 和 markRaw
1.13 customRef
-
customRef用于自定义一个ref，可以显示的控制依赖追踪和触发响应，接受一个工厂函数，两个参数分别是用于追踪的track与用于触发相应的trigger，并返回一个带有get和set属性的对象
-
创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制
function myRef(value){
let timer
return customRef((track,trigger)=>{
return{
get(){
console.log('有人读取数据了');
track()//通知vue追踪value的变化
return value
},
set(newValue){
console.log('有人修改数据了');
clearTimeout(timer)
timer=setTimeout(()=>{
value=newValue
trigger()//重新解析模板
},2000)
}
}
})
}
1.14 provide 和 inject
作用：实现祖与后代间组件间通信；
1、祖组件：
setup(){
let car = reactive({
name:'car',
price:188888
})
provide('car',car)//给自己的后代组件传递数据
return {
...toRefs(car)
}
}
2、后代组件
setup(){
let car = inject('car')
return{
car
}
}
1.15 isRef、isReactive、isReadonly、isProxy
响应式数据的判断
-
isRef：检查一个值是否为一个ref对象；
-
isReactive：检查一个对象是否由reactive创建的响应式代理；
-
isReadonly：检查一个对象是否由readonly创建的响应式代理；
-
isProxy：检查一个对象是否由reactive或readonly方法创建的代理；
1.16 新的组件
-
Teleport
-
Teleport是一种能够将我们的组件html结构移动到指定位置的技术。
<teleport to='移动位置' > // 可以跟id、class等
<div v-if="isShow" class="mask">
<div class="dialog">
danchuang<br>
<button @click="isShow=false">关闭弹窗</button>
</div>
</div>
</teleport>
