一、 Reactive判断的API

1. isProxy

检查对象是否由reactive或者readonly创建的proxy ，返回一个布尔值

<script setup>
import { reactive, readonly, isProxy } from 'vue'

let foo = readonly({ name: 'WFT1' }) // 其中的属性不可修改

let bar = reactive({ name: 'WFT2' })

console.log(isProxy(foo)) // true
console.log(isProxy(bar)) // true

</script>

2. isReactive

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

如果该代理是readonly创建的，但包裹了由reactive船舰的另一个代理，它也会返回为true

<script setup>
import { reactive, readonly, isReactive } from 'vue'

let foo = reactive({ name: 'WFT2' })

let bar = readonly(reactive({ name: 'WFT1' }))

let info = readonly({ age: 18 })


console.log(isReactive(foo)) // true
console.log(isReactive(bar)) // true
console.log(isReactive(info)) // false

</script>

3. isReadonly

检查对象是否是由readonly创建的只读代理

<script setup>
import { readonly, isReadonly } from 'vue'

let foo = readonly({ name: 'WFT1' })

console.log(isReadonly(foo)) // true

</script>

4. toRaw

返回 reactive 或 readonly代理的原始对象（不建议保留对原始对象的持久引用，请谨慎使用）

<script setup>
import { reactive, readonly, toRaw } from 'vue'

let obj1 = { name: 'WFT1' }
let obj2 = { name: 'WFT2' }

let foo = reactive(obj1)
let bar = readonly(obj2)

let myObj1 = toRaw(foo)
let myObj2 = toRaw(bar)

console.log(myObj1 === obj1) // true
console.log(myObj2 === obj2) // true

</script>

5. shallowReactive

创建一个响应式代理，它跟踪其自身property的响应性，但不执行嵌套对象的深层响应式转换（深层还是原生对象）

<template>
  <div class="main">
    <h3>{
   
   { obj.info.name }}</h3>
    <button @click="edit">深层修改</button>
  </div>
</template>
<script setup>
import { shallowReactive } from 'vue'

let obj = shallowReactive({
  info: {
    name: 'WFT'
  }
})

const edit = () => {
  obj.info.name = '哈哈哈'
  console.log(obj)
}
</script>

上面代码，当点击深层修改按钮时页面并没有改变，但是控制台打印的obj其中的info.name已经修改。如果换成reactive包裹就会发生改变

6. shallowReadonly

创建一个proxy，使其自身的property为只读，但不执行嵌套对象的深度只读转换（深层还是可读、可写的）

<script setup>
import { readonly } from 'vue'

let obj = readonly({
  info: {
    name: 'WFT'
  }
})

const edit = () => {
  obj.info.name = '哈哈哈'
}
</script>

看这段儿代码，我们去修改其中属性在控制台会给出警告，为一个只读属性，不可修改

但是将readonly换成 shallowReadonly 就可以修改了，当然浅层是不能修改的，深层还是可以修改

<script setup>
import { shallowReadonly } from 'vue'

let obj = shallowReadonly({
  info: {
    name: 'WFT'
  }
})

const edit = () => {
  obj.info.name = '哈哈哈'
}
</script>

二、Ref相关的API

1. isRef

检查对象是否是由ref创建的响应式代理

<script setup>
import { ref, isRef } from 'vue'

const name = ref('WFT')

console.log(isRef(name)) // true

</script>

2. toRefs

这个就是，当我们使用了reactive定义了响应式对象的时候，我们想通过es6语法解构出来使用的华，这时候的解构出来的就不是响应式数据。如果想解构出来的也是响应式数据，就要使用toRefs了，使用toRefs包裹之后，再解构出来，里面的每个属性都相当于通过ref包裹了一层的

<template>
  <div class="main">
    <h3>{
   
   { info.age }}</h3>
    <h3>{
   
   { age }}</h3>
    <button @click="edit">修改age</button>
  </div>
</template>
<script setup>
import { reactive, toRefs } from 'vue'

let info = reactive({ age: 18 })

let { age } = toRefs(info)

const edit = () => {
  age.value++
}
</script>

就像上面的代码示例

3. toRef

这个和toRefs有着一样的功能，只不过这个是将里面的某一个属性转为响应式，该方法接受两个参数，第一个参数就是目标reactive对象，第二个就是我们要操作的属性

<template>
  <div class="main">
    <h3>{
   
   { info.age }}</h3>
    <h3>{
   
   { age }}</h3>
    <button @click="edit">修改age</button>
  </div>
</template>
<script setup>
import { reactive, toRef } from 'vue'

let info = reactive({ name: 'wft', age: 18 })

let age = toRef(info, 'age')

const edit = () => {
  age.value++
}
</script>

<script setup>
import { reactive, toRef } from 'vue'

const state = reactive({ name: 'wft', age: 18 })

// 如果我们只希望转换一个reactive对象中的属性为ref响应式变量，那么可以使用toRef方法
const name = toRef(state, 'name')
const { age } = state // 这个age不是响应式数据
const changeName = () => state.name = 'WFT'
</script>

4. unref

如果我们想要获取一个ref引用中的value，那么也可以通过unref

如果参数是一个ref，则返回内部值，否则返回参数本身；
这是 val = isRef(val) ? val.value : val 的语法糖函数

<script setup>
import { ref, unref } from 'vue'

const name = ref('WFT')

test(name)
test('这个名字不是由ref方法包裹的')

function test(name) {
  console.log(unref(name))
}

</script>

5. shallowRef

创建一个浅层的ref对象和 shallowReactive类似

<template>
  <div class="main">
    <h3>{
   
   { obj.info.age }}</h3>
    <button @click="editAge">修改age</button>
  </div>
</template>
<script setup>
import { shallowRef } from 'vue'

const obj = shallowRef({ info: { name: 'wft', age: 18 } })

const editAge = () => {
  obj.value.info.age++
  console.log(obj.value.info.age) // 19  但是页面没有更新
}

</script>

6. triggerRef

手动触发和shallowRef相关联的副作用

还是上面的代码，我们使用shallowRef包裹的浅层ref对象，修改深层变量的时候页面不会进行更新，这时候我们手动调用triggerRef就可以强制更新

<template>
  <div class="main">
    <h3>{
   
   { obj.info.age }}</h3>
    <button @click="editAge">修改age</button>
  </div>
</template>
<script setup>
import { shallowRef, triggerRef } from 'vue'

const obj = shallowRef({ info: { name: 'wft', age: 18 } })

const editAge = () => {
  obj.value.info.age++
  triggerRef(obj)
}

</script>

7. customRef (使用极少)

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

它需要一个工厂函数，该函数接受 track 和 trigger函数作为参数；
并且应该返回一个带有get 和 set的对象

其实上面真正使用到的时候就不多，这个的使用就更少了，所以我也没有很深入去研究这个api，所以这个不做案例代码了，知道有这个东西就好了，大家感兴趣可以自己去百度找一些案例看看，一般做第三方库的时候可能会使用这个api

Vue3中Composition 其他一些API