Understanding the various ref in Vue3: toRef, toRefs, isRef, unref, etc.

Vue series of articles

• Understanding v-memo in Vue3
• Understanding Suspense in Vue3
• Understanding reactive, isReactive and shallowReactive in Vue3
• Understanding defineModel in Vue3
• Understanding Fragment in Vue3
• Understanding Teleport in Vue3
• Understanding Async Components in Vue3
• Understanding v-model in Vue3
• Understanding watch and watchEffect in Vue3
• Understanding and Practice of the Vue3 Composition API
• Understanding Hooks in Vue3 (Why use hooks)
• Vue3- Use and Encapsulation Concept of Custom Hooks Functions
• Understanding the various ref in Vue3: toRef, toRefs, isRef, unref, etc
• Vue3 Development Solutions(Ⅰ)
• Vue3 Development Solutions(Ⅱ)
• The details about Vue3 that you didn’t know
• Vue3 develop document
• 28 Vue Interview Questions with Detailed Explanations

In Vue3, there are many functions related to responsiveness, such as toRef, toRefs, isRef, unref, etc. Reasonably using these functions can greatly improve efficiency in actual development.

ref()

Everyone is no stranger to the ref API. It is often used in Vue3. Its function is to accept a value and return a responsive object. We can access and modify this value through the .value property. In the template, we can omit .value, for example in the following code, when the button is clicked, the count on the page will change responsively.

<template>
    <div>
        {{ count }}
        <button @click="addCount">+1</button>
    </div>
</template>

<script lang='ts' setup>
import { ref } from "vue"
const count = ref(1)
const addCount = () => {
    count.value++
}
</script>

toRef

toRef can create a responsive ref based on a property in a responsive object. At the same time, this ref is synchronized with the property in the original object. If the value of…