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.