Vue3.0—其它 Composition API

## 1.shallowReactive 与 shallowRef

-shallowReactive：只处理对象最外层属性的响应式（浅响应式）。

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

- 什么时候使用?

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

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

注：shallowReactive把对象变为Object类型，不求助reactive生成Proxy对象

## 2.readonly 与 shallowReadonly

-readonly: 让一个响应式数据变为只读的（深只读）。

-shallowReadonly：让一个响应式数据变为只读的（浅只读）。

- 应用场景: 不希望数据被修改时。

注：shallowReadonly可以修改深层的数据，第一层不能修改

## 3.toRaw 与 markRaw

- toRaw：

-作用：将一个由```reactive```生成的响应式对象转为普通对象

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

-markRaw：

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

-应用场景:

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

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

## 4.customRef

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

- 实现防抖效果：

```vue

 <template>
   <input type="text" v-model="keyword">
   <h3>{{keyword}}</h3>
 </template>
 
 <script>
   import {ref,customRef} from 'vue'
   export default {
     name:'Demo',
     setup(){
        // let keyword = ref('hello') //使用Vue准备好的内置ref
        //自定义一个myRef
       function myRef(value,delay){
         let timer
          //通过customRef去实现自定义
         return customRef((track,trigger)=>{
           return{
             get(){
                track() //告诉Vue这个value值是需要被“追踪”的
               return value
             },
             set(newValue){
               clearTimeout(timer)
               timer = setTimeout(()=>{
                 value = newValue
                 trigger() //告诉Vue去更新界面
               },delay)
             }
           }
         })
       }
        let keyword = myRef('hello',500) //使用程序员自定义的ref
       return {
         keyword
       }
     }
   }
 </script>

```

注意：需要定义一个timer，为了防抖（开启多个定时器）

## 5.provide 与 inject

<img src="https://v3.cn.vuejs.org/images/components_provide.png"style="width:300px" />

- 作用：实现祖与后代组件间通信

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

- 具体写法：

1.祖组件中：

```js

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

```

2.后代组件中：

```js

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

```

注意：provide传出数据，inject接收数据

## 6.响应式数据的判断

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

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

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

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