My Wemby Ref Journey Starts
So there I was, neck-deep in this Vue component, trying to handle some dynamic form stuff. Heard good things about Wemby patterns, wanted to try ’em myself. Saw all these `ref` and `reactive` options floating around online. Felt like staring at a wall of cereal boxes – no clue which one to grab first.
Grabbing The Usual Suspects
First instinct? Just chuck `reactive()` at everything. Seemed cleaner, no ugly `.value` stuff to type constantly. Made a little form state object:
javascript
const formState = reactive({
username: ”,
email: ”,
isSubmitting: false
Felt smooth typing `*` directly in the template. Did a happy dance for about five minutes.
Then BAM. Hit a wall. Needed to pass just that `isSubmitting` flag to a child component. Stupidly tried `setup(props) { return { submitting: * } }`. Nope. Broken. Watched that stupid flag stubbornly refuse to update. Reality check: `reactive` loses its reactivity magic when you destructure it or pass primitives around. Felt like carrying groceries in a ripped bag.
Swearing At `.value`
Alright, fine. Pulled out the `ref()` hammer next.
javascript
const username = ref(”);
const email = ref(”);
const isSubmitting = ref(false);
Immediately wanted to chuck my keyboard. Typing `*` everywhere in the script? My pinky finger staged a protest. Hated it. Hated every single keystroke. Felt like bureaucracy – unnecessary paperwork.
The Tipping Point
Persistence paid off, though. Needed to send that `isSubmitting` flag to a child component again. This time? Dead simple.
javascript
// Parent
// Child
const props = defineProps([‘isBusy’]);
watch(() => *, (newVal) => *(‘Child sees:’, newVal));
It. Just. Worked. Watched the `isBusy` prop change perfectly in the child. That stubborn flag finally cooperated.
When Things Clicked
Took a coffee break, stared at my messy screen. Had one of those shower-thoughts moments:
- Simple Stuff Needing to Travel? `ref()` FTW. For passing single values around, especially primitives or needing direct reassignment later? `ref()` sucks less. `.value` tax is annoying but predictable.
- Grouped Data Staying Put? `reactive()` Feels Good. When you’ve got a cohesive object living mostly in one place, where properties stick together and won’t get ripped apart? `reactive()` feels cleaner for scripts.
My Cheat Sheet Now
After stumbling around like a new puppy, here’s the messy logic I stick to:
- Start with `reactive()` for local, grouped state objects that won’t get torn apart.
- Instantly reach for `ref()` whenever I think: “I might pass this single thing somewhere later,” or “This is a boolean/string/number.”
- Stop trying to force one for everything. It’s like forks and spoons – both useful, depends on the mess you’re eating.
Ended up mixing them constantly in my Wemby stuff. Still grumble about `.value`, but hey, the forms work now.
