一：toRef和toRefs

toRef和toRefs不丢失响应式的情况下，把对象数据 分解/扩散，不创造响应式，而是延续响应式，

说白了就是解决在某些情况下解构导致丢失响应式问题

1：toRef

将响应式对象（reactive封装的）的一个属性，创建一个ref，具有响应式，两者保持引用关系

let listData = reactive({
      title: 'vue3',
      content: "hi",
    })

toRef(listData, 'title')

2：toRefs

将响应式对象（reactive封装的）转化为普通对象，每个属性都是对象的ref，保持引用关系

...toRefs(listData)

二：shallowRef 与 shallowReactive

只监听第一层数据的变化，是一种非递归响应的api

1：shallowRef =>处理基本数据类型的响应式, 不进行对象的响应式处理

const a =shallowRef({b:1}) 
a.value.b =2//视图不会更新 
console.log(a.value)//{b : 2} 但是能追踪到值得变化

2：shallowReactive=> 处理对象最外层属性的响应式（浅响应式）

const state =shallowReactive({foo:1,nested:{bar:2}})
// 改变 state 本身的性质是响应式的
 state.foo++
 state.nested.bar++// 非响应式

三：readonly 与 shallowReadonly

把响应式数据变为深浅只读，主要用于不希望数据被修改时

1：readonly => 让一个响应式数据变为只读的（深只读）

let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          salary: 20,
        },
      },
    })
person = readonly(person)

2：shallowReadonly=>让一个响应式数据变为只读的（浅只读）

person = shallowReadonly(person)

四：toRaw 与 markRaw

1：toRaw =>将一个由reactive生成的响应式对象转为普通对象

const person = reactive({
	  name: '哈哈',
	  age: 10,
	  job: {
	    salary: 20
	  }
	})
const p =toRaw(person)

2：markRaw=>标记一个对象，使其永远不会再成为响应式对象

 	let car = { name: '汽车', price: 40 }
 	person.car = markRaw(car)  // 此时，person里面添加的car就是普通数据	

五：customRef

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

1：第一个return是返回ref对象，第二个return是对象语法要求

2：数据value发生了变化，触发set函数，变化后的数据newValue，被赋予给value，然后通过get，将变化后的value给return出去

3：属性

track： 通知vue追踪数据的变化

trigger： 通知Vue去重新解析模板

function useDebounceRef(value:any,delay=2000) {
  let timeId:any
  return customRef((track,trigger)=> {
    return {
      get() {
        track()
        return value
      },
      set(newValue) {
        clearTimeout(timeId)
        timeId = setTimeout(() => {
          value = newValue
          trigger()
        }, delay);
      }
    }
  })
}

六：响应式数据的判断

1：isRef: 检查值是否为 ref 对象

let sum = ref(0)
console.log(isRef(sum))

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

let car = reactive({name:'奔驰',price:'40W'})
console.log(isReactive(car))

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

let cars = readonly(car)
console.log(isReadonly(cars))

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

console.log(isProxy(car))
console.log(isProxy(sum))

七：provide 与 inject

provide函数：给自己的后代组件传递参数

inject函数：注入祖组件传递过来的参数

provide('car',car) 

const car =inject('car')