vue3中不常用的组合式Api

shallowReactive

只处理对象最外层属性的响应式（浅响应式，只考虑第一层次数据的响应式）

<template>
  <h1>{{ obj.n }}</h1>
  <button @click="obj.n++">n+1</button>
  <h1>{{ obj.m.x }}</h1>
  <button @click="obj.m.x++">x+1</button>
</template>

<script>
import {  shallowReactive } from 'vue'
export default {
  name: 'HelloComponent',
  setup() {
    let obj = shallowReactive({
      n:10,
      m:{x:1}
    })
    return {obj}
  }
}
</script>

此时obj中的n是响应式数据，m中的x不是响应式数据，虽然能对x的值进行操作，但是页面不发生响应式改变

shallowRef

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

<template>
  <h1>{{ n }}</h1>
  <button @click="n++">n+1</button>
  <h1>{{ obj.n }}</h1>
  <button @click="obj.n++">n+1</button>
</template>

<script>
import { shallowRef } from 'vue'
export default {
  name: 'HelloComponent',
  setup() {
    let n = shallowRef(0)
    let obj = shallowRef({
      n: 10,
    })
    return {
      n,
      obj
    }
  }

}
</script>

此时n为为响应式数据，而obj里面的n不是响应式数据

readonly

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

<template>
  <h1>{{ n }}</h1>
  <button @click="n++">n+1</button>
</template>

<script>
import { ref, readonly } from 'vue'
export default {
  name: 'HelloComponent',
  setup() {
    let n = readonly(ref(0))
    return {n}
  }
}
</script>

这里的n不是响应式数据，无法改变n的值。

shallowReadonly

响应式对象式数据的第一层数据变为只读，而深层的数据仍然是响应式数据

<template>
  <h1>{{ n.y }}</h1>
  <button @click="n.y++">n+1</button>
  <h1>{{ n.x.z }}</h1>
    <button @click="n.x.z++">z+1</button>
</template>

<script>
import { reactive,  shallowReadonly } from 'vue'
export default {
  name: 'HelloComponent',
  setup() {
    let n = shallowReadonly(reactive({
      y:1,
      x:{
        z:0
      }
    }))
    return {
      n
    }
  }
}
</script>

n中的y是只读，z是响应式数据

customRef

并对其依赖项跟踪和更新触发进行显式控制。
自定义ref函数

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

<script>
import {  customRef } from 'vue'
export default {
  name: 'HelloC',
  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>

provide 与 inject

作用：实现祖组件与后代组件通信, 父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

祖组件

let person = reactive({
      name:'zs',
      age:18
    })
    provide('person', person)

后代组件

let person = inject('person')
console.log(person) // 响应式数据对象 
return {person}

这样后代组件就能获取祖组件传递的person响应式对象

响应式数据判断

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

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

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

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