Advanced Composables — Series 2

Preview — 3 of 10 questions

What renders during the network delay, and what happens if the import fails?

javascript

import { defineAsyncComponent } from 'vue'
import LoadingSpinner from './LoadingSpinner.vue'
import LoadError from './LoadError.vue'

const HeavyChart = defineAsyncComponent({
  loader: () => import('./HeavyChart.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: LoadError,
  delay: 200,
  timeout: 5000,
})

ALoadingSpinner renders only if loading takes longer than delay (200ms) — a fast-resolving import never shows it at all, avoiding a flash of loading state for near-instant loads; if the loader either throws or exceeds timeout (5000ms), LoadError renders instead of HeavyChart

BLoadingSpinner renders immediately and unconditionally the instant loading starts; delay only controls how long LoadError stays visible after a failure

CerrorComponent only handles network-level failures — a component that throws during its own render (a JS bug inside HeavyChart.vue itself) bypasses errorComponent entirely

Dtimeout and delay are aliases for the same option — setting both throws a configuration error

Why is sameValue false, even though both refs hold the value 1?

javascript

import { ref } from 'vue'

const a = ref(1)
const b = ref(1)

const sameValue = a.value === b.value  // ?
const sameRef = a === b                // ?

AsameValue is true (1 === 1, comparing the plain unwrapped numbers); sameRef is false — a and b are two entirely distinct ref objects, each independently created by its own ref(1) call, regardless of what value they happen to hold. Comparing refs with === compares object identity, not their wrapped contents

BBoth sameValue and sameRef are true — Vue caches and reuses ref() objects that hold identical primitive values

CBoth are false — ref() never supports strict equality comparison of any kind, on either the ref or its .value

DsameValue is false and sameRef is true — Vue interns identical primitive values into a shared underlying storage, so both refs point to the same internal cell

What does state2 === state evaluate to, and why?

javascript

import { reactive } from 'vue'

const original = { count: 0 }
const state = reactive(original)
const state2 = reactive(state) // calling reactive() AGAIN, on an already-reactive object

console.log(state2 === state) // ?

Afalse — every call to reactive() creates a brand-new Proxy wrapper, even around an object that's already a Proxy

Breactive(state) throws a runtime error — reactive() can't accept an object that's already reactive as its argument

Ctrue — reactive() is idempotent: calling it on a value that's already a reactive Proxy simply returns that same Proxy unchanged, rather than wrapping a Proxy inside another Proxy

Dtrue, but only because original and state happen to reference the same underlying data — state2 is actually a distinct, third Proxy wrapping state

Answer all 10 questions (7 more), see explanations for every answer, and track your score.