一，shallowReactive 和 shallowRef

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

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

• 什么时候使用？

1. 如果有一个对象数据，结构比较深，但变化时只是外层属性变化 ==> shallowReactive

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

二，readonly 与 shallowReadonly

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

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

3. 应用场景：不希望数据被修改时

三，toRaw与markRaw

• toRaw：

1. 作用：将一个由reactive生成的响应式对象变成普通对象

2. 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新

• markRaw：

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

2. 使用场景：

(a).有些值不应被设置为响应式的，例如复杂的第三方类库等；

(b).当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能

四，customRef

• 作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制(就是对自己想要的响应式数据进行自定义控制)

• 实现防抖效果：

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

<script>
import {ref,customRef} from 'vue'
export default{
    name:'Test',
    setup(){
        //自定义一个myRef
        function myRef(value,delay){
            let timer;
            return customRef((track,trigger)=>{
                return{
                    get(){
                        track() //通知vue追踪value的变化(提前跟get方法告知，让它认为这个value是有用的)
                        return value
                    },
                    set(newValue){
                        clearTimeout(timer)
                        timer = setTimeout(()=>{
                            value = newValue
                            trigger() //通知vue取重新解析模板
                        },delay)
                    }
          
                }
            })
        }
        let keyword = myRef('Test',1000)
        
        return {keyword}
    }
}

</script>

五，provide和inject

• 作用：实现祖级组件跟所有后代组件之间的通信

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

• 具体写法：

1.祖组件中：

import {provide,reactive} from 'vue'
setup(){
    ..........
    let test = reactive({name:'test1',total:15})
    provide('test',test)
    ..........
}

2.后代组件中：

import {inject} from 'vue'
setup(props,context){
    ..........
    let test = inject('car')
    return {test}
    
}

六，响应式数据的判断

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

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

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

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