Written from your two Essentials notes: templates and reactivity and rendering, events and forms. Reactivity, computed, watchers and the lifecycle are covered on Most important, so this page asks about everything else in those notes.
app.config.errorHandler catches, and why several apps on one page share nothing.:, @, #), modifier order.:class and :style merge with static attributes.<template v-if>, what v-if and v-show do to component state, iterating objects, index keys versus id keys, replacing arrays.v-for, refs before mount, <component :is> in <script setup>, v-model on native inputs.These slips are still in the two notes.
"v-if removes from DOM, v-else only hides" should name v-show: it renders the element and toggles display: none. v-else is the fallback branch of a v-if.
watch(myRefToWatch, async (oldVal, newVal) => …) has the arguments swapped. The signature is (newValue, oldValue, onCleanup).
The rendering note says watchers "are called in the call stack". Only flush: 'sync' watchers are. Default watchers run once per flush, before the render, as your Important note says correctly.
Only method handlers (@click="greet") receive the event. Inline handlers need $event or an arrow function.
map() is listed among the methods Vue reacts to. It returns a new array, like filter, concat and slice. The mutating ones are push, pop, shift, unshift, splice, sort and reverse.
<Comp v-bind:obj> binds one attribute named obj. Spreading an object of attributes is v-bind="obj".
The templates note says the app renders on app.mount('#app') "in app.vue". It is called on the app instance in the entry file, after plugins and configuration; App.vue is the root component.
The rendering note says the client's version is forced in production. Text and structure are patched, but attribute, class and style mismatches stay as the server rendered them.
.lazy is not a debounce: it switches v-model to the change event. In <Comp v-bind:[attr]="Martin" />, Martin is a variable, not a string. The hook is onRenderTracked, not onRenderTracker.
v-if and with v-show and log onMounted and onUnmounted each time."A directive is a v- attribute that gives an element reactive behaviour. In v-on:submit.prevent="onSubmit", v-on is the directive, submit is the argument it acts on, .prevent is a modifier that changes how it behaves, and onSubmit is the value, a JavaScript expression. Most have shorthands: : for v-bind, @ for v-on, # for v-slot. The order of modifiers matters, because Vue generates the checks in that order."
"Without keys, Vue patches lists in place and reuses elements and component instances by position. Anything with its own state, such as an input's text or a child component's local refs, then stays with the position instead of the item and appears on the wrong row after a reorder or deletion. A key gives each node an identity so Vue moves, creates and removes per item. The index is a position, so it is no better than no key; use an id."
"v-if really creates and destroys the element and its components, running their lifecycle and resetting their state, and it is lazy, so nothing renders until the condition is true. v-show always renders and toggles display: none, keeping state. I use v-show for things that flip often, v-if for things that rarely change or are expensive to render, and <template v-if> to group elements without a wrapper."
Nothing yet. Notes filed here show up on this page and the section overview.
Most important
Questions and flashcards from your Important note — reactivity and the event loop, the track and trigger engine, ref versus reactive, computed caching, watchers and flush timing, and the app lifecycle for client rendering, SSR and hydration, updates and unmount. Every question here is marked important and trained first.
Vue components in depth
Questions and flashcards from your notes on the Vue docs' Components In-Depth chapter — compiler macros, prop naming and read-only props, local drafts of props, event arguments, several v-models, v-model modifiers, defineModel and its pre-3.4 equivalent, fallthrough attributes, slots and dynamic scoped slots, provide/inject per subtree and async components — with a fact check of the notes.