Front-end Web Development Frameworks and Libraries Syllabus

What hook is used to add state to a function component, and what does it return?

The useState hook. It returns an array of two items: the current state value and a setter function, e.g. const [count, setCount] = useState(0).

Why should you never mutate state directly (e.g. state.value = 5)?

React won't detect the change and won't re-render. You must use the setter function (e.g. setState/setCount), which schedules a re-render and may batch updates.

What does 'lifting state up' mean in React?

Moving shared state to the closest common ancestor of components that need it, so the parent holds the state and passes it down via props, keeping the components in sync.

Why does the useState setter sometimes take a function argument like setCount(c => c + 1)?

The functional updater form uses the latest state value, which is essential when updating based on previous state, especially with batched or asynchronous updates.

How is data passed from a child back up to a parent in React?

The parent passes a callback function down as a prop; the child calls that function (often with data) to notify the parent, since data itself only flows downward.

What is a Vue instance and how is it created (Vue 2)?

A Vue instance is the root of every Vue application, created with new Vue({ ... }). It connects Vue's reactivity and behavior to a DOM element specified by the options object.

What is the purpose of the 'el' option in a Vue instance?

The el option mounts the Vue instance to an existing DOM element via a CSS selector (e.g. el: '#app'), telling Vue which part of the page it controls.

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.

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.

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).

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.

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).

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.

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 }).

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.

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.

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.

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.

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).

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.

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".

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".

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).

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.

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.

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').

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.

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.

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.

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.

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).