1. API for Reactive judgment

1. isProxy

Checks if the object was created by a reactive or readonly proxy, returns a boolean

<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

Checks if the object is a reactive proxy created by reactive

It will also return true if the proxy was created readonly but wraps another proxy with a reactive ship

<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

Checks if object is a readonly proxy created by readonly

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

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

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

</script>

4. toRaw

Returns the original object of a reactive or readonly proxy (it is not recommended to keep a persistent reference to the original object, use with caution)

<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

Creates a reactive proxy that tracks the responsiveness of its own properties, but does not perform deep reactive transformations of nested objects (deep or native objects)

<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>

In the above code, when the deep modification button is clicked, the page does not change, but the info.name in the obj printed on the console has been modified. If you change to a reactive package, it will change

6. shallowReadonly

Create a proxy that makes its own property read-only, but does not perform deep read-only conversion of nested objects (deep layers are still readable and writable)

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

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

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

Look at this piece of code, let's modify the attribute in the console and give a warning, it is a read-only attribute and cannot be modified

But it can be modified by replacing readonly with shallowReadonly. Of course, the shallow layer cannot be modified, and the deep layer can still be modified.

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

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

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

2. Ref-related APIs

1. isRef

Checks if the object is a reactive proxy created by ref

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

const name = ref('WFT')

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

</script>

2. toRefs

This is, when we use reactive to define a responsive object, we want to deconstruct it using es6 syntax, and the deconstructed at this time is not responsive data. If you want to deconstruct responsive data, you need to use toRefs. After wrapping it with toRefs, and then deconstruct it, each attribute in it is equivalent to a layer wrapped by 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>

like the code sample above

3. toRef

This has the same function as toRefs, except that this is to convert a certain attribute in it into a reactive type. This method accepts two parameters. The first parameter is the target reactive object, and the second is the attribute we want to operate

<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

If we want to get the value in a ref reference, we can also pass unref

If the parameter is a ref, returns the internal value, otherwise returns the parameter itself;
This is a syntactic sugar function for 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

Create a shallow ref object similar to 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

Manual triggering of side effects associated with shallowRef

Still the above code, we use the shallow ref object wrapped by shallowRef, and the page will not be updated when the deep variable is modified. At this time, we can manually call triggerRef to force the update

<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 (rarely used)

Create a custom ref with explicit control over its dependency tracking and update triggering

It requires a factory function that accepts track and trigger functions as parameters;
and should return an object with get and set

In fact, there are not many times when the above is actually used, and the use of this is even less, so I haven't studied this api in depth, so this is not a case code. It is good to know that there is such a thing. If you are interested, you can Go to Baidu to find some cases by yourself. Generally, this API may be used when making a third-party library.

Some other APIs of Composition in Vue3