Master Vue 3 Ref: One‑Way Data Flow, Component Communication & Custom useRefState

In Vue 3, reactive variables are defined using ref , e.g., const name = ref(""); name.value = "test" . After defining, changes update the UI.

This article discusses managing Ref state across components and better encapsulating Ref read/write.

One‑Way Data Flow

All props follow one‑way binding: they change when the parent updates and flow down to children, preventing children from unintentionally modifying parent state.

Example: a header with a menu button toggles a sidebar; clicking close hides it.

<code>&lt;script&gt;
import { ref } from "vue";
import Header from "./components/Header.vue";
import Nav from "./components/Nav.vue";
export default {
  components: { Header, Nav },
  setup() {
    const isOpen = ref(false);
    const handToggle = () => isOpen.value = !isOpen.value;
    return { isOpen, handToggle };
  },
};
&lt;/script&gt;

&lt;template&gt;
  &lt;Header @toggle="handToggle" /&gt;
  &lt;Nav :isOpen="isOpen" @toggle="handToggle" /&gt;
&lt;/template&gt;</code>

header.vue

<code>&lt;script&gt;
export default {
  setup(props, { emit }) {
    const handleMenu = () => {
      emit("toggle");
    };
    return { handleMenu };
  },
};
&lt;/script&gt;

&lt;template&gt;
  &lt;header&gt;
    &lt;nav&gt;
      &lt;button @click="handleMenu"&gt;menu&lt;/button&gt;
    &lt;/nav&gt;
  &lt;/header&gt;
&lt;/template&gt;</code>

nav.vue

<code>&lt;script&gt;
export default {
  props: {
    isOpen: { type: Boolean, default: false },
  },
  setup(props, { emit }) {
    const handleMenu = () => {
      emit("toggle");
    };
    return { props, handleMenu };
  },
};
&lt;/script&gt;

&lt;template&gt;
  &lt;div :class="['nav', { open: props.isOpen }]"&gt;
    &lt;a @click="handleMenu"&gt;close&lt;/a&gt;
  &lt;/div&gt;
&lt;/template&gt;</code>

The flow: Header emits toggle , the parent updates isOpen , passes it as a prop to Nav, Nav's close link emits toggle , the parent updates isOpen again, completing the cycle.

Although functional, this adds extra event communication; a simpler approach removes the event layer.

<code>&lt;script&gt;
// ... omitted for brevity
export default {
  setup() {
    const isOpen = ref(false);
    const handleOpenMenu = () => isOpen.value = !isOpen.value;
    return { isOpen, handleOpenMenu };
  },
};
&lt;/script&gt;

&lt;template&gt;
  &lt;Header :handleOpenMenu="handleOpenMenu" /&gt;
  &lt;Nav :isOpen="isOpen" :handleOpenMenu="handleOpenMenu" /&gt;
&lt;/template&gt;</code>

Passing the state‑modifying function directly to child components simplifies the data flow.

One‑way data flow ensures data moves from parent to child via props, making the flow clear and predictable for large applications.

React has a similar "Lifting State Up" pattern.

Encapsulation

Encapsulating state‑modifying functions hides implementation details, similar to React's useState .

<code>import { useState } from 'react';

function MyComponent() {
  const [age, setAge] = useState(28);
  const [name, setName] = useState('Taylor');
  const [address, setAddress] = useState('Taiwan');
}</code>

In Vue we can create a useRefState composable to manage state like React's useState .

<code>import { shallowRef } from "vue";

export function useRefState(baseState) {
  const state = shallowRef(baseState);
  const update = (newValue) => {
    state.value = newValue;
  };
  return [state, update];
}
</code>

Usage example:

<code>&lt;script setup&gt;
import { useRefState } from "./composables/useRefState.js";
const [name, setName] = useRefState("mike");
const [info, setInfo] = useRefState({
  name: "mike",
  age: 12,
});
&lt;/script&gt;

&lt;template&gt;
  &lt;h2&gt;name: {{ name }}&lt;/h2&gt;
  &lt;pre&gt;info: {{ info }}&lt;/pre&gt;
  &lt;input type="text" v-model="name" /&gt;
  &lt;button @click="setName('jacky')"&gt;set name&lt;/button&gt;
  &lt;button @click="setInfo({ name: 'andy', age: 20 })"&gt;set info&lt;/button&gt;
&lt;/template&gt;
</code>

This reduces boilerplate by avoiding separate set functions for each ref while preserving reactivity.

shallowRef differs from ref : it only makes the top‑level property reactive, improving performance for large or deep structures.

When using useRefState , updates replace the whole object, similar to React's state handling.

<code>const [info, setInfo] = useState({
  name: "mike",
  age: 12,
});

// Replace the entire object
setInfo({
  ...info,
  address: addr,
});
</code>

Thus we avoid unnecessary ref usage for large objects.

Conclusion

Vue 3's reactivity offers flexible ways to manage cross‑component state, whether via event emission or direct method passing. Encapsulating state with a custom useRefState composable provides a React‑like experience, promoting clear data flow and maintainable code as projects grow.