【Vue3】第七部分 其它 Composition API
文章目录
7. 其它 Composition API
7.1 shallowReactive 与 shallowRef
-
shallowReactive
:只对对象最外层的数据做响应式处理(浅响应)。 -
shallowRef
:只处理基本数据类型的响应式, 不进行对象的响应式处理。 -
什么时候使用?
-
如果有一个对象数据,结构比较深, 但变化时只是外层属性变化 ===>
shallowReactive
。 -
如果有一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换 ===>
shallowRef
。
-
7.2 readonly与shallowReadonly
readonly示意图
shallowReadonly示意图
具体代码
setup(){
//数据
let sum = ref(0)
let person = reactive({
name:'Tree',
age:18,
job:{
salary:20
}
})
sum = readonly(sum)
// person下的所有属性都是只读
person = readonly(person)
// 浅层次只读(只有第一层只读)
// person = shallowReadonly(person)
return{
sum,
...toRefs(person)
}
}
readonly
: 让一个响应式数据变为只读的(深只读)。shallowReadonly
:让一个响应式数据变为只读的(浅只读)。- 应用场景: 不希望数据被修改时。
7.3 toRaw与markRow
toRaw
:- 作用:将一个由
reactive
(ref不能使用)生成的响应式对象转为普通对象。 - 使用场景:用于读取响应式对象对应的普通对象,对这个普通对象的所有操作,不会引起页面更新。
- 作用:将一个由
markRaw
:- 作用:标记一个对象,使其永远不会再成为响应式对象。
- 应用场景(更广):
- 有些值不应被设置为响应式的,例如复杂的第三方类库等。
- 当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。
具体代码
setup(){
//数据
let sum = ref(0)
let person = reactive({
name:'Tree',
age:18,
job:{
salary:20
}
})
// toRaw只能对reactive进行处理
function changeRaw (){
let p = toRaw(person)
console.log(p);
}
function addCar (){
let car = {name:'本田',price:40}
// 标记一个对象,使其永远不会再成为响应式对象
person.car = markRaw(car)
}
function changeinof (){
person.car.price ++
console.log(person.car);
}
return{
sum,
person,
...toRefs(person),
changeRaw,
addCar,
changeinof
}
}
7.4 customRef
- 作用:创建一个自定义的
ref
,并对其依赖项跟踪
和更新触发
进行显式控制
。
具体代码:
<template>
<div>
<input type="text" v-model="keyword">
<h2>{{keyword}}</h2>
</div>
</template>
<script>
import {customRef} from "vue"
export default {
name:'TestDemo',
setup(){
let keyword = myRef('hello')
//自定义ref --- 名字叫做:myRef
function myRef (value){
let timer
return customRef((track,trigger)=>{
return {
get(){
console.log(`读取成功!该值为:${value}`);
track() // 告诉vue追踪value的变化
return value
},
set(newval){
clearTimeout(timer)
console.log(`修改成功!修改后的值为:${newval}`);
timer = setTimeout(() => {
value = newval
trigger() // 通知vue去重新解析模板
}, 500);
}
}
})
}
return{
keyword
}
}
}
</script>
<style>
</style>
7.5 provide 与 inject
- 作用:实现祖先与后代组件间通信
- 套路:父组件有一个
provide
选项来提供数据,后代组件有一个inject
选项来开始使用这些数据
具体写法:
祖组件中:
setup(){
......
let car = reactive({name:'奔驰',price:'40w'})
// provide 提供
// 第一个参数:取个名字,用于inject找到对应的数据
// 第二个参数:传入的数据
provide('car',car)
......
}
后代组件中:
setup(){
......
const car = inject('car')
return {car}
......
}
7.6 响应式数据的判断
-
isRef
: 检查一个值是否为一个ref
对象 -
isReactive
: 检查一个对象是否是由reactive
创建的响应式代理 -
isReadonly
: 检查一个对象是否是由readonly
创建的只读代理 -
isProxy
: 检查一个对象是否是由reactive
或者readonly
方法创建的代理
import { readonly ,ref ,isRef,isProxy,isReactive,isReadonly, reactive } from "vue"
export default {
name:'App',
setup(){
let car = reactive({name:'奔驰',price:"50w"})
let sum = ref(0)
let car2 = readonly(car)
console.log(isRef(sum));
console.log(isReactive(car));
console.log(isReadonly(car));
//注意:reactive从根本上是依赖Proxy,isReadonly返回的还是Proxy
console.log(isProxy(car2));
console.log(isProxy(car));
}
}
总结
以上就是今天要讲的内容,希望对大家有所帮助!!!