【Vue3】shallowReactive和shallowRef、readonly 和 shallowReadonly、toRaw和markRaw、customRef、provide和inject

目录

shallowReactive和shallowRef 

readonly 和 shallowReadonly

toRaw和markRaw

customRef

provide和inject

响应式数据的判断

---

shallowReactive和shallowRef 

shallow Reactive：只处理对象最外层属性的响应式（浅响应式）

shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理

什么时候使用：

• 如果有一个对象数据，结构比较深，但变化时只是外层属性变化===>shallowReactive.下面的例子只会响应得到job这一层，后面的j1得不到。

let person = shallowReactive({
    job:{
      j1:{
        salary:20
       }
    }
})

• 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换===>shallowRef

let x = shallowRef()
   y:0
})

readonly 和 shallowReadonly

• readonly:让一个响应式的数据变为只读的（深只读）
• shallowReadonly：让一个响应式的数据变为只读的（浅只读）
• 应用场景：不希望数据被修改

let person = shallowReactive({
    job:{
      j1:{
        salary:20
       }
    }
})

person = readonly(person)  //person对象里的为只读，不能修改了

person = shallowReadonly(person)  //只有浅层次为只读，salary可以修改

toRaw和markRaw

toRaw：

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

markRaw：

1. 作用：标记一个对象，使其永远不会再成为响应式对象
2. 应用场景：

• 有些值不应被设置为响应式，例如复杂的第三方类库等
• 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

function showRawPerson(){
  const p = toRaw(person)
  console.log(p)
}

 toRaw会生成最原始的对象数据。

 

function addCar(){
   let car = {name:'奔驰',price:40}
   person.car = markRaw(car)
}

function changePrice(){
   person.car.price++
   console.log(person.car.price)
}

上面的函数使得car从响应式变为普通对象，所以点击changePrice函数，不会出现响应式的变化。

customRef

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

实现防抖效果：

<template>
   <input type="text" v-model="keyword"/>
   <h3>{{keyword}}</h3>
</template>

<script>
import {ref ,customRef} from 'vue'

export default {
  name: 'App',
  setup() {
      //自定义ref  
      function myRef(value){
         let timer 
         return customRef((track,trigger)=>{
            return {
              get(){
                 console.log(`有人从myRef这个容器中读取数据了,我把${value}给他了`) 
                 track() //通过vue追踪value的变化   
                 return value    
              },
              set(newValue){
                 console.log(`有人从myRef这个容器中数据改为了:${newValue}`)   
                 clearTimeout(timer)
                 setTimeout(()=>{
                     value = newValue
                     trigger()  //通知vue去重新解析模板
                 },1000)
              }
            }
         })
      }
    //let keyword = ref('hello')   //使用vue提供的ref
      let keyword = myRef('hello') 




    return{
      keyword
    }
  }

}
</script>

provide和inject

作用：实现祖孙组件间通信

套路：父组件有一个provide选项来提供数据，后代组件有一个inject选项来开始使用这些数据

具体写法：

祖组件

setup(){
  ...
  let car = reactive({name:'奔驰',price:'40万'})
  provide('car',car)
  ...
}

孙组件

setup(props,context){
  ...
  const car = inject('car')
  return {car}
  ...
}

响应式数据的判断

isRef：检查一个值是否为一个ref对象

isReactive：检查一个对象是否是由reactive创建的响应式代理

isReadonly：检查一个对象是否是由readonly创建的只读代理

isProxy： 检查一个对象是否是由reactive或者readonly方法创建的代理