[Vue3] 9 其它API

前言

目标

掌握以下api的用法

---

graph LR
A[api] --> B[1 shallowRef与shallowReactive的用法与区别]
A --> C[2 readonly与shallowReadonly的用法与区别]
A --> D[3 toRaw与markRaw用法与区别]
A --> E[4 customRef的用法]
A --> F[5 provide与inject]
A --> G[6 响应式数据的判断]

1 shallowRef与shallowReactive

shallowRef

浅层次响应，只处理基本数据类型响应，不处理对象类型响应

    <h2>Count1的值：{{ count1}} </h2>
    <h2>X的值：{{ x}} </h2>
    <button @click="count1++">count1++</button>
    <button @click="x.y++">.y++</button>
let x = shallowRef({
            y:0
})
let count1 = shallowRef(0)

有特殊情况 当我写一个add方法去修改，shallowRef定义的对象时，是可以实现响应式的

 <button @click="add">++</button>
 setup(){
        let x = shallowRef({
            y:0
        })
        let count1 = shallowRef(0)
        console.log('--X--',x)
        function add (type){
            x.value.y++
            count1.value++
            console.log('----x----',x)
            console.log('----count1----',count1)
          }
        return{
            person,
            x,
            count1,
            add
        }
    },

shallowReactive

只处理对象最外层的属性响应式(浅响应)

import { shallowReactive } from 'vue'
let person = shallowReactive({
            name:'张三',
            age:18,
            job:{
                jobName:'前端开发'
            }
})

最外层修改可以实现响应式，第二层开始能修改成功但是页面数据不是响应式的

总结

• shallowReactive： 只处理对象最外层属性的响成式 （浅响应式）
• shallowRef：只外理是基本数据类型的响应式，不进行对象的的应式处理。
• 什么时候用? 。 若有一个对象数居，结构比较深，但变化只是最外层变化 =》shallowReactive 若有一个对象数据，后续功能不会修改对象中的属性，而是生成新的对象来替换 => shallowRef

2 readonly与shallowReadonly

readonly: 让一个响应式数据变为只读的(深只读) shallowReadonly: 让一个响应式数据变为只读的 (浅只读)

引入

import { readonly,shallowReadonly } from 'vue'

使用readonly

let person = reactive({
     name:'张三',
     age:18,
     job:{jobName:'前端开发'}
})
person = readonly(person)

经由readonly处理之后的对象，无论嵌套多深都不可修改 **使用shallowReadonly **

let person = reactive({
     name:'张三',
     age:18,
     job:{jobName:'前端开发'}
})
person = shallowReadonly(person)

经由shallowReadonly处理之后的对象，最外层不可修改，深层次的还可以修改

3 toRaw与markRaw用法与区别

toRaw:

• 作用:将一个由 reactive 生成的响应式对象转为普通对象
• 使用场景:用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新

markRaw:

• 作用：标记一个对象，使其永远不会再成为响应式对象 。
• 应用场景: 1.有些值不应被设置为响应式的，例如复杂的第三方类库等 2.当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能.

引入

import { toRaw,markRaw } from 'vue'

使用toRaw

let count = ref(0)
let person = reactive({
            name:'张三',
            age:18,
            job:{
                jobName:'前端开发'
            }
})
person = toRaw(person)
console.log('----person-----',person)
count = toRaw(count)
console.log('----count-----',count)

reactive的响应式对象经过toRaw处理可变回普通对象，ref响应式对象不可 使用toRaw

 function addCar(type){
            if(type=='update'){
                person.car.carName+='!'
                console.log('----person.car-----',person.car)
                return
            }
            let car = {carName:'奔驰',carPrice:100000}
            person.car = markRaw(car)
            console.log('----person-----',person)
}

信息修改成功，但是经过markRaw处理的对象，不是响应式对象

4 customRef的用法

作用： 创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制

引入

import { customRef } from 'vue'

**使用customRef ** 实现延迟更新的效果

 <input type="text" v-model="name">
    <h2>{{ name }}</h2>
   function myRef(value,delay){
            return customRef((tarck,traget)=>{
                let timer
                return{
                    get(){
                        console.log('--get--',value)
                        tarck() // 通知vue 追踪value的变化
                        return value
                    },
                    set(newValue){
                        clearTimeout(timer)
                        timer = setTimeout(()=>{
                            value = newValue
                            traget() //通知更新
                        },delay)
                    }
                }
            })
        }
        let name = myRef('张三',1000)

5 provide与inject

作用： 实现祖组件与后代组件间通信 provide用来提供数据，inject用来接收数据 父子组件件传值一般还是使用props比较多

引入

 import { provide,inject } from "vue"

使用 app.vue 父组件

   let person = ref({
      name: "张三",
      age: 20,
      sex: "男",
    })
    provide('person',person)

son.vue 子孙组件

let person = inject('person')
console.log('--子孙组件--',person)

6 响应式数据的判断

• isRef: 检查一个值是否为一个 ref 对象
• isReactive: 检查一个对象是否是由 reactive创建的响应式代理。
• isReadonly: 检查一个对象是否是由 readonly 创建的只读代理。
• isProxy: 检查一个对象是否是由 reactive或者 readonly 方法创建的代理

   let count = ref(0)
        console.log('--isRef--',isRef(count))
        let person = reactive({
            name:'张三',
            age:18,
            job:{
                jobName:'前端开发'
            }
        })
        console.log('--isReactive--',isReactive(person))
        let p = reactive({
            name:'张三',
            age:18,
            job:{
                jobName:'前端开发'
            }
        })
        p = readonly(p)
        console.log('--isReadonly--',isReadonly(p))
        console.log('--isProxy--',isProxy(p))

---