AlexVipond

Function refs vs. ref objects

Great question I got on Twitter: what are the benefits of returning a function ref from a Vue 3 composable, instead of returning the ref object directly?

Here are two SFC playgrounds to outline the two alternatives:

• function ref
• [ref object](https://sfc.vuejs.org/#eNp9UsFugzAM/ZUol3ZSm9wrqLQPmCbtnEtLTQciTuQENgnx73OAIsamHpCw/d7Dz49evnqvuhbkSWahoMpHESC2/mywst5RFL0gKMUgSnJW7Bi6W43aAB9Qvl9rKOKCUXrdVjEww2DhMCQKNGABEzr/Rd+/GMz0tAN/nYsI1jeXCFwJkd2qLm2SGzkrGHnONHd5nOkFKw9y2u5oL17VwSFb65OCmQfByJMYO6nHhlJt5GeMPpy0DmWRDlIH5eiu+U1Ri7GyoCDY45XcVwBiYSMPKw3Nz

AlexVipond

Updating arrays of elements with function refs in Vue 3

I did a screencast series recently talking about my favorite Vue 3 feature: function refs. Check out the screencast series for more context-in this gist, I'm going to answer a fantastic question I got in one of the videos' comment section.

This question was about how to properly update arrays of elements that are captured by function refs. Let's check out the basic principle first, before we look at the details of the question.

<script setup>
import { ref, onBeforeUpdate } from 'vue'

AlexVipond

Scoped slots in Vue 3 setup functions

_TL;DR: You can use arrow functions that return slot function calls to render scoped slots in the render function returned by setup. [Here's an SFC playground](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdD5cbmltcG9ydCB7IHJlZiB9IGZyb20gJ3Z1ZSdcblxuY29uc3QgV2l0aFJlbmRlckZuID0ge1xuXHRzZXR1cCAocHJvcHMsIHsgc2xvdHMgfSkge1xuICAgIGNvbnN0IGNvdW50ID0gcmVmKDApXG4gICAgXG4gICAgcmV0dXJuICgpID0+IHNsb3RzLmRlZmF1bHQoe1xuICAgICAgY291bnQ6IGNvdW50LnZhbHVlLFxuICAgICAgb25DbGljazogKCkgPT4gY291bnQudmFsdWUrKyxcbiAgICB9KVxuICB9XG59XG5cbmV4cG9ydCBkZWZhdWx0IHtcbiAgY29tcG9uZW50czoge1xuICAgIFdpdGhSZW5kZXJGbixcbiAgfVxufVxuPC9zY3JpcHQ+XG5cbjx0ZW1wbGF0ZT5cbiAgPFdpdGhSZW5kZXJGbiB2LXNsb3Q9XCJ7IGNvdW50LCBvbkNsaWNrIH1cIj5cblx0ICA8ZGl2IHN0eWxlPVwiZGlzcGxheTogZmxleDsgZ2FwOiAxcmVtO1wiPlxuXHRcdCAgPHNwYW4+Y291bnQgaXM6IHt7IGNvdW50IH19PC9zcGFuPlxuICBcdCAgPGJ1dHRvbiA6b25DbGljaz1cIm9uQ2xpY2tcIj5cbiAgICBcdCAgQ291bnQgdXBcbiAgICBcdDwvYnV0dG9uPlxuXHQgIDwvZGl2PlxuICA8L1dpdGhSZW5kZXJGbj5cbjwvdGVtcGxhdGU+Iiwi

AlexVipond

https://stackblitz.com/edit/jfunky?file=index.html,jfunky.ts,entry.ts,README.md

AlexVipond

async function getPageData () {
  const users = await get('/users')
  const user1 = await get('/users/1')
  const usersWithParams = await get('/users?limit=10')
  const user1WithParams = await get('/users/1?hello=world')

  return {
    users,
    user1,
    usersWithParams,

AlexVipond

Effect timing in Vue 3

If your reactive side effects aren't properly timed in a Vue app, you'll see very confusing behavior.

To fully understand Vue effect timing, you'd have to learn about microtasks in browser-based JavaScript. That said, a deep understanding of microtasks and of the browser event loop is really only practical for framework authors—it's not practical knowledge for framework users.

Instead of trying to learn how Vue effect timing actually works under the hood, try learning the following:

• Simplified versions of effect timing concepts
• Some opinionated guidelines on how to use the two effect timing tools at your disposal in Vue 3: the flush option for watch and watchEffect, and nextTick.

AlexVipond

import { reactive, effectScope, watchEffect } from 'vue'

function switchboard(value) {
    let lookup = {}
    let scope = effectScope()

    let current

    let get = () => current

AlexVipond

Vue code review checklist

Double-check all the Vue best practices that are easiest to forget when you’re focused on design and business logic, but hardest to catch with automated tooling.

The answer to every question should be “yes”, and you should aim to spend 10-15 minutes on the entire list after you’ve already had a chance to read and understand the code.

State management

• Is reactive state created & managed where it's needed, instead of further up the component or composable tree?
• Is prop drilling avoided, within reason?
• Is state derived with computed when possible, instead of synced?

AlexVipond

Levels of Reusability cheatsheet

In the "Reusable Components" course, Michael Thiessen teaches six levels of reusability for Vue components.

I started to understand these levels more deeply once I noticed that each level relies on a specific Vue feature to unlock new possibilities.

Here's a cheatsheet:

Level of Reusability	Description	Vue feature

AlexVipond

State management

• Is reactive state created & managed where it's needed, instead of further up the component tree?
• Is prop drilling avoided, within reason? Further reading
• Is state derived when possible, instead of synced? Further reading
• Are persistent, non-reactive pieces of state (e.g. instances of third party libraries, resize/intersection/mutation observer instances, etc.) stored with useRef?

Common array iterations

• Have iterations been avoided or simplified as often as possible for performance and/or readability?
• Are .reduce() callbacks reasonably readable?