· 3 min read

Learn Vue.js Core Concepts: 30 Flashcards on Reactivity, Directives and the Vue Ecosystem

Learn Vue.js with deck XT7941: 30 flashcards on directives, virtual DOM, reactivity, computed vs watch, Pinia, Vue Router and Vite, plus the cards to update.

Green and teal Vue-style chevron with a component tree and floating flashcards

Studying. But it's also a video game. 🎮

Flashcards, quizzes and games that make you actually remember.

Start playing — it's free

Posted by

Vue's official docs teach the framework in about forty pages. Deck XT7941 – Vue.js Core Concepts (30 cards) does it in a different order. It works like a condensed encyclopedia entry: about half the cards cover the rendering model, and the other half cover the ecosystem and project history. That makes it a good map of Vue, but you won't learn to write a component from it alone. Here's how to use it well.

Study this deck: Vue.js Core Concepts

1 / 10
Question

Vue.js

Knew itLearning

Tap the card for the answer · swipe right if you knew it, left if not

Cards worth knowing cold

FrontBack (from the deck)
Vue.js directivesHTML attributes that extend HTML with functionality, built-in or user-defined
Core library of Vue.js focused onThe view layer only; routing and state management come from separate libraries
What does Vue compile templates into?Virtual DOM render functions that calculate the minimal components to re-render
How does Vue's reactivity system work?Each component tracks its reactive dependencies, so Vue knows exactly which components to re-render
Computed in VueA reactive property that recalculates automatically when its dependencies change
Watch in VueRuns a callback when a reactive property changes, receiving the new and old values
WatchEffect in VueAutomatically tracks reactive dependencies and runs whenever they change
PiniaOfficial state management, recommended since 2022
VuexLegacy state library (2015), in maintenance mode since 2023
Purpose of the $route objectAccess to route info such as $route.params.id

What the deck covers: MVVM, declarative rendering, component composition, directives, HTML-based templates, the virtual DOM, render functions, JSX and hyperscript, reactivity, computed, watch, watchEffect, transition effects, Vue Router and $route, Pinia vs Vuex, Single-File Components, Vite, Vue Loader, hot-module replacement, Vue Devtools, VueUse (200+ composables), server-side rendering for SEO, the LTS policy (18 + 18 months), anime-themed release names, and the State of Vue.js Report.

Split the deck into two piles

Cards 1-12 and 25-30 are the real engineering content. Cards 2 (pronunciation), 14-16 (LTS policy, release names, file size), 26 and 27 (the State of Vue report and its 22% survey figure) are trivia. Tag them history. Learn the engineering pile first, and only add the trivia once those reviews are easy. Interviewers ask about computed vs watch, not about gzip size. The 33.9 KB figure is a snapshot anyway, so it will go out of date.

Three cards to update

  • Card 9 says reactivity "uses plain JavaScript objects". That's true from your side of the code, but Vue 3 wraps them in JavaScript Proxies. Vue 2 used getter/setter conversion with Object.defineProperty, which explains its old caveats about adding new keys to objects. Put "Proxy-based since Vue 3" in the hint.
  • Card 18 links SFCs to Vue Loader for webpack. Today, npm create vue@latest scaffolds a Vite project that compiles .vue files with @vitejs/plugin-vue. Card 17 already says this, so connect the two cards.
  • Card 14: apply the LTS rule to Vue 2. It reached end of life on 31 December 2023.

Write the missing cards

The title promises "core concepts", but some of Vue's core vocabulary never appears in the deck. Write these 6 cards yourself: ref() vs reactive(), v-if vs v-show, v-for with :key, v-model, props down / emits up, and Options API vs Composition API (<script setup>). Then make a three-way contrast card for the trio the deck teaches separately: computed returns a cached value, watch watches one explicit source and gets the old and new values, and watchEffect tracks its dependencies automatically and runs right away. Cards 28-30 make far more sense as one table.

Keep going

Vue templates are just JavaScript underneath, so a solid ES2015+ foundation helps: JavaScript ES6+ Features, sorted by ECMAScript year. To compare frameworks, Vue's computed and watchers are the counterparts of React's useMemo and useEffect in the React Hooks and Next.js study guide.

Search for XT7941 in the Flip It library to start reviewing.

Ready to learn faster? 🚀

Join FLIP IT for free and turn studying into a game.

Create my free account