How RxJS Principles Can Transform Your Vue Code for Cleaner Reactivity

Motivation and Background

The author noticed many developers misuse React Hooks and decided to share insights from a Vue perspective, emphasizing that Vue, React, and RxJS all belong to the broader realm of reactive programming.

Brief RxJS Overview

A playful example models a house‑buying scenario using RxJS primitives ( Subject, Observable, scan, merge, etc.) to illustrate event streams, state accumulation, and conditional logic.

Event → Observer pattern

Sequence → Iterator pattern

Stream → Pipeline pattern

RxJS uniquely combines these patterns, treating events as array‑like sequences that can be transformed with rich operators and composed via pipelines.

Why Learn RxJS for Vue

Understanding RxJS helps you write Vue code that is more concise, better structured, loosely coupled, and easier to test, turning complex implementations into simpler, declarative flows.

Mapping RxJS Concepts to Vue Reactivity

Reactive data : ref or reactive objects behave like RxJS Observable, emitting an event on each change.

Derived data : computed mirrors RxJS operators that derive new observables.

Side effects : watch / watchEffect / render correspond to RxJS subscribe handling.

Although you cannot directly replace Vue APIs with RxJS, the underlying mindset of pipeline transformation is transferable.

Common Vue Code Smells

Excessive cached state (e.g., sum, avg).

Overuse of watch / watchEffect.

Verbose setup functions or component code.

Uncontrolled state mutations.

Practical Refactorings

Pagination

Typical approach uses multiple reactive variables and a watch that creates redundant state.

const query = reactive({})
const pagination = reactive({ pageNo: 1, pageSize: 10 })
const total = ref(0)
const list = ref([])
const loading = ref(false)
const error = ref()
watch([query, pagination], async () => {
  try {
    error.value = undefined
    loading.value = true
    const data = await request(`/something?${qs({ ...query, ...pagination })}`)
    total.value = data.total
    list.value = data.list
  } catch (err) {
    error.value = err
  } finally {
    loading.value = false
  }
}, { immediate: true })

Recommended approach replaces the watch with a single useRequest hook that behaves like a computed value, keeping the data flow natural.

const query = reactive({})
const pagination = reactive({ pageNo: 1, pageSize: 10 })
const data = useRequest(() => `/something?${qs({ ...query, ...pagination })}`)

useRequest

abstracts caching, stale‑while‑revalidate, and concurrency handling, similar to RxJS switchMap.

Real‑time Search

Conventional Vue solution mixes watch with manual debouncing, leading to race conditions.

const query = ref('')
const handleQueryChange = debounce((evt) => {
  query.value = evt.target.value
}, 800)
watch(query, async (q) => {
  const res = await fetchData(q)
  data.value = res
})

RxJS implementation uses a declarative pipeline:

const searchInput$ = fromEvent(searchInput, 'input').pipe(
  debounceTime(800),
  map(event => event.target.value),
  distinctUntilChanged(),
  switchMap(keyword => from(searchList(keyword)))
)

Vue can achieve the same effect with refDebounced from VueUse.

Polling with Conditional Stop

Using useInterval and a computed shouldPoll flag, the author shows how to start/stop polling based on data conditions.

const { counter: tick, pause, resume } = useInterval(5000, { controls: true, immediate: false })
const shouldPoll = computed(() => data.data?.some(i => i.expired > Date.now()))
watch(shouldPoll, p => p ? resume() : pause())

RxJS version leverages lazy Observable execution and takeUntil to stop the interval.

const interval$ = interval(5000)
const poll$ = interval$.pipe(
  switchMap(() => from(fetchData())),
  share()
)
const stop$ = poll$.pipe(filter(i => i.every(item => item.expired <= Date.now())))
poll$.pipe(takeUntil(stop$)).subscribe(i => console.log(i))

Complex Area Selector

A typical hierarchical selector (country → province → city) is implemented with many watches and mutable state, illustrating the previously mentioned smells.

The refactored approach extracts data fetching into composable hooks ( useCountryList, useRegion) and uses computed for derived values, keeping each component small and side‑effect‑free.

Principles and Recommendations

Prefer computed over watch / watchEffect to express data derivation.

Use readonly to protect state from unintended mutation.

Minimize cached state; let data flow naturally.

Apply top‑down decomposition: move detailed logic into hooks or child components with clear names.

Treat watch as an imperative callback; replace it with the declarative semantics of computed whenever possible.

Leverage VueUse utilities for common patterns (debounce, interval, request caching).

Encapsulate side effects in reusable hooks.

Adopt a single‑direction data flow, similar to CQRS, Redux, or Vuex, where components own their state and communicate changes via events.

Design programs as pipelines: declarative, composable, and free of hidden side effects.

Organize code in the order ref/reactive → computed → watch → handler → render.

By following these guidelines, Vue developers can harness the power of reactive programming, achieve cleaner architecture, and write code that is easier to understand, test, and maintain.