「这是我参与11月更文挑战的第5天，活动详情查看：2021最后一次更文挑战」
继上一章文章介绍，这是Vue3的第三块内容
三、其他Composition API 不常用
1.shallowReactive 与 shallowRef shallow（晒豆 ）
-
shallowReactive：只处理对象最外层的属性的响应式（浅响应式）
-
shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理
-
什么时候使用？
- 如果有一个对象数据，结构比较深，但变化时只是最外层属性变化 ===> shallowReactive
- 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef
2.readonly与shallowReadonly readonly（ 软的欧蕾）
readonly: 让一个响应式数据边为只读的（深只读）
shallowReadonly：让一个响应式数据变为只读的（浅只读）
应用场景：不希望数据被修改时
3、toRaw和markRaw
-
toRaw：
- 作用：将一个reactive生产的响应式对象转为普通对象
- 使用场景：用于读取响应式对象的普通对象，对这个普通对象的所有操作，不会引起页面的更新
-
markRaw： （应用场景 挺多的）
-
作用：标记一个对象，使其永远不会在成为响应式对象
-
应用场景：
- 1、有些值不应设置为响应式的，例如复杂的第三方类库等
- 2、当渲染具有不可变数据源的大列表时，跳过转换可以提高性能、
-
4、customRef
作用：创建一个自定义的ref，并对齐依赖项进行更新触发进行显示控制
实现防抖效果：
//自定义一个myref
function myRef(value,delay) {
return customRef((track,trigger) => {
//解决定时器的bug，必须要清除定时器
let timer
return {
//读数据找 get
get() {
console.log(`有人从myRef这个容器中读取了数据！,我把${value}给他了`)
track() // (踹可)追踪数据 通知Vue 追踪数据（value的变化）
// 提前和get商量一下，让他认为这个Value是有用的！
return value
},
set(newValue) {
console.log(`有人从myRef这个容器中数据改为${newValue}给他了`)
clearTimeout(timer) // 只要前面有定时器就清除上一个定时器
timer = setTimeout(()=>{
//这里很重要 因为这里 是让页面显示的
value = newValue
trigger() // (锤可)解析模板 通知Vue 重新解析 模板
},delay)
}
}
})
}
// let keyWord = ref('hello') //使用vue提供的ref
let keyWord = myRef('hello',500) //使用程序员自定义的ref
复制代码5.provide和inject （祖孙之前通讯）
- 作用：实现 祖孙组件间通讯
- 套路：祖组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来使用这些数据
- 写法：
- 祖先的写法：
import {reactive,toRefs,provide } from 'vue'
setup(){
let cra = reactive({name:'宝马',piece:'40w'})
provide('cra',cra) // 给自己的后代进行传递数据
return {
...toRefs(cra)
}
复制代码- 孙子的写法：
import {inject} from 'vue'
setup(){
let car = inject('cra')
console.log(car)
return{
car
}
}
复制代码6.响应式数据的判断
- isRef：检查一个值是否为一个 ref 对象
- isReactive：检查一个对象是否是由 Reactive 创建的响应式代理
- isReadonly：检查一个对象是否是由 readonly 创建的只读代理
- isProxy：检查一个对象是否是由 Reactive或者 Readonly 方法创建的代理
5.provide和inject （祖孙之前通讯）
- 作用：实现 祖孙组件间通讯
- 套路：祖组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来使用这些数据
- 写法：
- 祖先的写法：
import {reactive,toRefs,provide } from 'vue'
setup(){
let cra = reactive({name:'宝马',piece:'40w'})
provide('cra',cra) // 给自己的后代进行传递数据
return {
...toRefs(cra)
}
复制代码- 孙子的写法：
import {inject} from 'vue'
setup(){
let car = inject('cra')
console.log(car)
return{
car
}
}
复制代码6.响应式数据的判断
- isRef：检查一个值是否为一个 ref 对象
- isReactive：检查一个对象是否是由 Reactive 创建的响应式代理
- isReadonly：检查一个对象是否是由 readonly 创建的只读代理
- isProxy：检查一个对象是否是由 Reactive或者 Readonly 方法创建的代理
2.Teleport (非常有用)
什么式Teleport？ ---是一种能够将我们的组件html结构 移动到指定位置 的技术
<teleport to="body" v-if="isShow"> //to属性可以实现 指定进行跳转div窗口
<div class="mack">
<div class="dia">
<h1>我是弹窗</h1>
<h4>我是内容</h4>
<h4>我是内容</h4>
<h4>我是内容</h4>
<h4>我是内容</h4>
<button @click="isShow=false">关闭弹窗</button>
</div>
</div>
</teleport>
复制代码3.Suspense 等待异步组件
-
等待异步组件时渲染一些额外内容，让应用有更好的用户体验
-
使用步骤
- 异步引入组件
import {defineAsyncComponent} from 'vue'
const HelloWorld=defineAsyncComponent(()=>import('./components/HelloWorld'))//动态引入组件
复制代码2.使用Suspense包裹组件，并配置好 default和fallback
<template>
<div id="app">
<h3>我是祖先</h3>
<suspense>
<template v-slot:default> <!--加载完成时展示的内容-->
<hello-world></hello-world>
</template>
<template v-slot:fallback> <!--没加载完成时展示的内容-->
<h3>我在加载中...</h3>
</template>
</suspense>
</div>
</template>
复制代码下一篇，我将会介绍一下其他API得用法，比如全局API得转移，3.0的API做了那些调正，喜欢的话点个赞吧~