Master Vue3 Advanced Techniques: Composable Functions, customRef & shallowRef

These two Vue3 advanced techniques can “open the meridian channels”, improving understanding of underlying principles and the ability to solve complex problems.

Encapsulation art — freely create Composable functions (useXXX)

Composable

is a function that uses Vue's composition API to encapsulate and reuse stateful logic. By convention we name them with a

use

prefix, e.g.,

useMousePosition

,

useFetch

. It is not a specific API but a code‑organization pattern.

Say goodbye to Mixin chaos : Compared with Vue2 Mixins,

Composable

sources are clear, no naming conflicts, and type inference is friendlier. Each reactive state and method originates from a specific

use

function.

Logical cohesion, separation of concerns : Different logics (data fetching, event listening, animation control) can be split into separate

Composable

s, keeping the

<script setup>

section clean and only responsible for “organizing” logic.

Creating a useDebouncedRef

Suppose we have a search box and want to debounce API requests by 500 ms after the user stops typing.

1. Create useDebouncedRef.ts

Note: This step also uses the core API of the next technique, customRef , which will be explained later.

2. Use it in a component

Control reactivity — play with customRef and shallowRef

After mastering

ref

and

reactive

, complex features or performance optimizations may require “bypassing” or “customizing” Vue’s default deep reactivity.

customRef

: creates a custom

ref

with explicit control over dependency tracking and trigger. Our

useDebouncedRef

is a prime example.

shallowRef

: creates a ref whose

.value

assignment is reactive, but its internal value is not deeply converted, avoiding unnecessary proxy overhead.

customRef demonstrates our grasp of reactivity principles : the reactive system relies on

track()

(dependency collection) and

trigger()

(update). Using

customRef

turns us from API consumers into API creators.

shallowRef as a performance tool : for large immutable data structures (e.g., a massive JSON object or a third‑party library instance), a normal

ref

would deeply proxy the object, incurring overhead.

shallowRef

is the optimal choice.

Using shallowRef to optimise large data

Imagine importing a huge chart library instance; we only care whether the instance itself is replaced.

Integrating these two techniques into daily development and practicing deliberately will elevate code quality and deepen technical expertise.