Front-end Web Development Frameworks and Libraries Flashcards

24 sample cards from the Frameworks and Libraries deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

1. How is the root application created in Vue 3 instead of 'new Vue'?

   With createApp(options).mount('#app'). Vue 3 replaces the Vue 2 'new Vue({ el })' pattern with the createApp factory function and an explicit mount call.

2. Why must the 'data' option be a function in a Vue component (rather than an object)?

   So each component instance gets its own independent copy of the data. If data were a shared object, all instances would share the same state and interfere with each other.

3. What are the main lifecycle hooks of a Vue instance, in order?

   beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, and beforeUnmount (beforeDestroy in Vue 2) / unmounted (destroyed in Vue 2).

4. What is the difference between a computed property and a method in Vue?

   Computed properties are cached based on their reactive dependencies and only re-evaluate when those change; methods run every time they are called. Use computed for derived data.

5. What is the difference between 'computed' and 'watch' in Vue?

   Computed properties declaratively derive a value from reactive data (synchronous, cached). Watchers run custom side-effect logic in response to a specific data change (good for async or expensive operations).

6. How do you register a global component in Vue?

   Using app.component('my-component', { ... }) in Vue 3 (or Vue.component in Vue 2), making it available everywhere without local import.

7. How do you pass data into a Vue component, and how is it declared?

   Via props: the parent binds an attribute (e.g. :title="msg"), and the child declares it in its props option (e.g. props: ['title'] or props: { title: String }).

8. How does a Vue child component communicate an event back to its parent?

   It emits a custom event with this.$emit('eventName', payload), and the parent listens with @eventName="handler" on the component tag.

9. What is a 'slot' in Vue?

   A slot is a placeholder (<slot></slot>) in a child component's template where the parent can inject custom content, enabling component composition similar to React's children.

10. What is a single-file component (SFC) in Vue?

    A .vue file containing three blocks: <template> (markup), <script> (logic/options), and <style> (CSS), bundling a component's structure, behavior, and styling in one file.

11. What is a Vue directive?

    A special HTML attribute prefixed with 'v-' that applies reactive behavior to the DOM, e.g. v-if, v-for, v-bind, telling Vue to do something special with that element.

12. What do the v-if and v-show directives do, and how do they differ?

    Both conditionally display an element. v-if actually adds/removes the element from the DOM (and is lazy), while v-show keeps it in the DOM and toggles its CSS display property (cheaper toggling).

13. What does the v-for directive do, and what should accompany it?

    v-for renders a list by iterating over an array or object, e.g. v-for="item in items". It should always be paired with a unique :key binding for efficient DOM updates.

14. What does v-bind do, and what is its shorthand?

    v-bind dynamically binds an attribute or prop to an expression, e.g. v-bind:href="url". Its shorthand is the colon, e.g. :href="url".

15. What does v-on do, and what is its shorthand?

    v-on attaches an event listener, e.g. v-on:click="handler". Its shorthand is the @ symbol, e.g. @click="handler".

16. What does v-model provide, and on what is it built?

    v-model creates two-way data binding between a form input and component state. It is syntactic sugar combining a value binding (v-bind) with an input event listener (v-on).

17. What is the difference between v-html and v-text (and the {{ }} interpolation)?

    {{ }} and v-text insert content as plain text (escaped). v-html renders a string as actual HTML, which can introduce XSS risk if the content is untrusted.

18. What is a custom directive in Vue, and give an example use case?

    A user-defined v- directive (registered via app.directive) for low-level DOM manipulation, e.g. a v-focus directive that calls element.focus() when the element is inserted.

19. What is the difference between an ES module 'named export' and a 'default export'?

    A module can have many named exports (imported with braces by their exact names: import { foo } from './m') but only one default export (imported without braces under any name: import foo from './m').

20. What is the difference between a library and a framework?

    With a library, your code calls the library (you control flow), e.g. React's view layer. With a framework, the framework calls your code and dictates structure (inversion of control), e.g. Angular or a full Vue app setup.

21. What is a service in front-end architecture (e.g. Vue/Angular), and what is its purpose?

    A service is a reusable module/class that encapsulates business logic, data access, or API calls, keeping components lean and promoting separation of concerns and code reuse.

22. How are services typically shared in a Vue application, and what JS pattern do they often use?

    As importable ES modules, often exposing a single shared instance (singleton pattern) so all components use the same service for API calls or shared state.

23. What is dependency injection, and how does it relate to services?

    Dependency injection is a pattern where a component receives its dependencies (like services) from the outside rather than creating them itself, improving testability and decoupling. Vue offers provide/inject for this.

24. Why is separating API/service logic out of components considered a best practice?

    It improves reusability (multiple components share one service), testability (logic can be tested in isolation), and maintainability (UI and data concerns are decoupled following separation of concerns).

What this deck covers

Frameworks and Libraries flashcards FAQ