[Vue3] 9 其它API

前言

目标

掌握以下api的用法

---

1 shallowRef与shallowReactive

shallowRef

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

登录后复制

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

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

有特殊情况
当我写一个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
        }
    },

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.

shallowReactive

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

登录后复制

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

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.

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

总结

• 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)

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

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

**使用shallowReadonly **

登录后复制

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

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

经由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)

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.

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)
}

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

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

4 customRef的用法

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

引入

import { customRef } from ‘vue’

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

登录后复制

 <input type="text" v-model="name">
    <h2 id="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)

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.
• 21.
• 22.

5 provide与inject

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

引入

登录后复制

 import { provide,inject } from "vue"

• 1.

使用
app.vue 父组件

登录后复制

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

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.

son.vue 子孙组件

登录后复制

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

• 1.
• 2.

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))

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.
• 11.
• 12.
• 13.
• 14.
• 15.
• 16.
• 17.
• 18.
• 19.
• 20.

---

原创作者: u_16040646 转载于: https://blog.51cto.com/u_16040646/11741973