Options API Deep-dive — Series 2

Preview — 3 of 10 questions

What does watch do when given an array of sources like this?

javascript

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

const firstName = ref('Ada')
const lastName = ref('Lovelace')

watch([firstName, lastName], ([newFirst, newLast], [oldFirst, oldLast]) => {
  console.log(`${oldFirst} ${oldLast} → ${newFirst} ${newLast}`)
})
</script>

Awatch only accepts a single source — this array syntax throws a runtime error

Bwatch runs a separate, independent callback for each ref in the array

Cwatch accepts an array of sources and fires the callback whenever any of them changes, passing arrays of new/old values in the same order as the sources

DOnly the first ref in the array (firstName) is actually watched — the rest are ignored

What does calling useCounter() twice from two different components produce?

javascript

// composables/useCounter.js
import { ref } from 'vue'

export function useCounter(initial = 0) {
  const count = ref(initial)

  function increment() {
    count.value++
  }

  return { count, increment }
}

ABoth components share the exact same count ref — incrementing in ComponentA also updates ComponentB's displayed count

Bcount is shared, but increment is a separate function per component

CThis throws an error — a composable can only be called once across the whole app

DCalling useCounter() in each component runs the function fresh, creating a brand-new, independent count ref each time — ComponentA's and ComponentB's counters are completely separate

Why does this pattern use a Symbol and wrap the provided value in readonly()?

javascript

// keys.js
export const ThemeKey = Symbol('theme')

ANeither Symbol nor readonly() change anything meaningful — they're purely stylistic choices

BThe Symbol key avoids collisions with other provide calls using the same string key elsewhere in the app; readonly() makes theme.value = 'light' a no-op with a dev warning, since only App.vue (the provider) should be allowed to mutate the source of truth

CSymbol keys make the value reactive; without one, provide/inject values are always plain, non-reactive values

Dreadonly() prevents DeepChild from even calling inject — it must use a different function, injectReadonly

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