其他Composition API

1.shallowReactive和shallowRef

1. shallowReactive:只处理对象最外层属性的响应式（浅响应式）
2. shallowRef：只处理基本数据类型的响应式，不进行对象的响应式处理
3. 使用场景

• 如果一个对象数据结构比较深，但变化时只是外层属性变化=>shallowReactive
• 如果一个对象数据，后续功能不会修改该对象中的属性，而是生成新的对象来替换=>shallowRef 

2.readonly与shallowReadonly

不希望数据被修改时使用。

• readonly:让一个响应式数据变为只读的（深只读）
•  shallowReadonly：让一个响应式数据变为只读的（浅只读，只有第一层只读）

 3.toRaw与markRaw

        1.toRaw

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

        2.markRaw:

•   标记一个对象，使其永远不会再成为响应式对象
• 场景：1.有些值不应该被设置为响应式的，例如复杂的第三方类库等

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

4.customRef 

 创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。

import { customRef } from 'vue'

setup(){
    let num = useDebouncedRef(5)
    //自定义一个防抖 ref，即只在最近一次 set 调用后的一段固定间隔后再调用：
    function useDebouncedRef(value, delay = 200) {
      let timeout
      return customRef((track, trigger) => {
        return {
          get() {
            track()
            return value
          },
          set(newValue) {
            clearTimeout(timeout)
            timeout = setTimeout(() => {
              value = newValue
              trigger()
            }, delay)
          }
        }
      })
    }
}

5.provide与inject 

 1.依赖注入：实现祖与后代组件间通信

 2.父组件有一个provide选项来提供数据，后代组件有一个inject选项来使用这些数据

3.具体写法

祖组件中：

import {reactive,provide} from "vue"
setup(){
    let person = reactive({
        name:'乔治',
        age:10
    })
    provide('person',person)
}

后代组件中：

import {inject} from "vue"
setup(){
    //此处得到的car是响应式数据
    const car = inject('car')
    return {car}
}

6.响应式数据的判断

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