Vue 3

Question 1

What is vue

Answer 1

Js frame work for buildin ui
Builds on top of standard html css js
provides a declarative and component-based programming model
model–view–viewmodel front end
Connects view and model with two way data binding

Question 2

core features of Vue

Answer 2

Declarative Rendering - Reactivity
Vue extends standard HTML with a template syntax that allows us to declaratively describe HTML output based on JavaScript state.

Vue automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen.

Question 3

vue capabilites

Answer 3

Enhancing static HTML without a build step
Embedding as Web Components on any page
Single-Page Application (SPA)
Fullstack / Server-Side Rendering (SSR)
Jamstack / Static Site Generation (SSG)
Targeting desktop, mobile, WebGL, and even the terminal

Question 4

Single-File Components
SFC

Answer 4

In most build-tool-enabled Vue projects, we author Vue components using an HTML-like file format called Single-File Component (also known as *.vue files, abbreviated as SFC). A Vue SFC, as the name suggests, encapsulates the component’s logic (JavaScript), template (HTML), and styles (CSS) in a single file

Question 5

API Styles

Answer 5

Vue components can be authored in two different API styles: Options API and Composition API.

Question 6

Options API

Answer 6

With Options API, we define a component’s logic using an object of options such as data, methods, and mounted. Properties defined by options are exposed on this inside functions

Question 7

Composition API

Answer 7

With Composition API, we define a component’s logic using imported API functions. In SFCs, Composition API is typically used with

. The setup attribute is a hint that makes Vue perform compile-time transforms that allow us to use Composition API with less boilerplate. For example, imports and top-level variables / functions declared in 
 are directly usable in the template.

Question 8

options vs composition api

Answer 8

The Options API is centered around the concept of a “component instance” (this as seen in the example), which typically aligns better with a class-based mental model for users coming from OOP language backgrounds. It is also more beginner-friendly by abstracting away the reactivity details and enforcing code organization via option groups.

The Composition API is centered around declaring reactive state variables directly in a function scope and composing state from multiple functions together to handle complexity. It is more free-form and requires an understanding of how reactivity works in Vue to be used effectively. In return, its flexibility enables more powerful patterns for organizing and reusing logic.

Question 9

The application instance

Answer 9

Every Vue application starts by creating a new application instance with the createApp function:

Question 10

The Root Component

Answer 10

The object we are passing into createApp is in fact a component. Every app requires a “root component” that can contain other components as its children.

If you are using Single-File Components, we typically import the root component from another file:

import { createApp } from ‘vue’
// import the root component App from a single-file component.
import App from ‘./App.vue’

const app = createApp(App)

Question 11

Mounting the App

Answer 11

An application instance won’t render anything until its .mount() method is called. It expects a “container” argument, which can either be an actual DOM element or a selector string:

Question 12

App Configurations

Answer 12

The application instance exposes a .config object that allows us to configure a few app-level options, for example, defining an app-level error handler that captures errors from all descendant components:

app.config.errorHandler = (err) => {
/* handle error */
}

Make sure to apply all app configurations before mounting the app!

Question 13

Template Syntax

Answer 13

Vue uses an HTML-based template syntax that allows you to declaratively bind the rendered DOM to the underlying component instance’s data. All Vue templates are syntactically valid HTML that can be parsed by spec-compliant browsers and HTML parsers.

Under the hood, Vue compiles the templates into highly-optimized JavaScript code. Combined with the reactivity system, Vue can intelligently figure out the minimal number of components to re-render and apply the minimal amount of DOM manipulations when the app state changes.

Question 14

jsx vue

Answer 14

If you are familiar with Virtual DOM concepts and prefer the raw power of JavaScript, you can also directly write render functions instead of templates, with optional JSX support. However, do note that they do not enjoy the same level of compile-time optimizations as templates.

Question 15

Text Interpolation

Answer 15

The most basic form of data binding is text interpolation using the “Mustache” syntax (double curly braces):

Question 16

JavaScript expressions

Answer 16

In Vue templates, JavaScript expressions can be used in the following positions:

Inside text interpolations (mustaches)
In the attribute value of any Vue directives (special attributes that start with v-)

Question 17

Expressions Only

Answer 17

Each binding can only contain one single expression. An expression is a piece of code that can be evaluated to a value. A simple check is whether it can be used after return

Question 18

Calling Functions

Answer 18

It is possible to call a component-exposed method inside a binding expression:

Functions called inside binding expressions will be called every time the component updates, so they should not have any side effects, such as changing data or triggering asynchronous operations.

Question 19

Restricted Globals Access

Answer 19

Template expressions are sandboxed and only have access to a restricted list of globals. The list exposes commonly used built-in globals such as Math and Date.

Globals not explicitly included in the list, for example user-attached properties on window, will not be accessible in template expressions. You can, however, explicitly define additional globals for all Vue expressions by adding them to app.config.globalProperties.

Question 20

Directives

Answer 20

Directives are special attributes with the v- prefix. Vue provides a number of built-in directives, including v-html and v-bind which we have introduced above.

Directive attribute values are expected to be single JavaScript expressions (with the exception of v-for, v-on and v-slot, which will be discussed in their respective sections later). A directive’s job is to reactively apply updates to the DOM when the value of its expression changes.

Question 21

directive Arguments

Answer 21

Some directives can take an “argument”, denoted by a colon after the directive name. For example, the v-bind directive is used to reactively update an HTML attribute:

template
<a> … </a>

<!-- shorthand -->

<a :href=”url”> … </a>

Question 22

Dynamic Arguments

Answer 22

It is also possible to use a JavaScript expression in a directive argument by wrapping it with square brackets:

Question 23

Modifiers

Answer 23

Modifiers are special postfixes denoted by a dot, which indicate that a directive should be bound in some special way. For example, the .prevent modifier tells the v-on directive to call event.preventDefault() on the triggered event:

Question 24

v-directive shcema

Question 25

ref()

Answer 25

ref() takes the argument and returns it wrapped within a ref object with a .value property: we did not need to append .value when using the ref in the template. For

Question 37

Getters should be side-effect free

Answer 37

It is important to remember that computed getter functions should only perform pure computation and be free of side effects. For example, don't mutate other state, make async requests, or mutate the DOM inside a computed getter! Think of a computed property as declaratively describing how to derive a value based on other values - its only responsibility should be computing and returning that value. Later in the guide we will discuss how we can perform side effects in reaction to state changes with watchers

Question 38

Avoid mutating computed value

Answer 38

The returned value from a computed property is derived state. Think of it as a temporary snapshot - every time the source state changes, a new snapshot is created. It does not make sense to mutate a snapshot, so a computed return value should be treated as read-only and never be mutated - instead, update the source state it depends on to trigger new computations.

Question 39

Watchers

Answer 39

Computed properties allow us to declaratively compute derived values. However, there are cases where we need to perform "side effects" in reaction to state changes - for example, mutating the DOM, or changing another piece of state based on the result of an async operation. With Composition API, we can use the watch function to trigger a callback whenever a piece of reactive state changes

Question 40

lifecycle hooks view

Answer 40

onMounted() onUpdated() onUnmounted() onBeforeMount() onBeforeUpdate onBeforeUnmount()

Question 41

onMounted

Answer 41

Registers a callback to be called after the component has been mounted. A component is considered mounted after: All of its synchronous child components have been mounted (does not include async components or components inside trees). Its own DOM tree has been created and inserted into the parent container. Note it only guarantees that the component's DOM tree is in-document if the application's root container is also in-document. This hook is typically used for performing side effects that need access to the component's rendered DOM, or for limiting DOM-related code to the client in a server-rendered application. This hook is not called during server-side rendering.

Question 42

onUpdated()

Answer 42

Registers a callback to be called after the component has updated its DOM tree due to a reactive state change. A parent component's updated hook is called after that of its child components. This hook is called after any DOM update of the component, which can be caused by different state changes, because multiple state changes can be batched into a single render cycle for performance reasons. If you need to access the updated DOM after a specific state change, use nextTick() instead. This hook is not called during server-side rendering. WARNING Do not mutate component state in the updated hook - this will likely lead to an infinite update loop!

Question 43

onUnmounted

Answer 43

Registers a callback to be called after the component has been unmounted. Type ts function onUnmounted(callback: () => void): void Details A component is considered unmounted after: All of its child components have been unmounted. All of its associated reactive effects (render effect and computed / watchers created during setup()) have been stopped. Use this hook to clean up manually created side effects such as timers, DOM event listeners or server connections. This hook is not called during server-side rendering.

Question 44

onBeforeMount()

Answer 44

Registers a hook to be called right before the component is to be mounted. Type ts function onBeforeMount(callback: () => void): void Details When this hook is called, the component has finished setting up its reactive state, but no DOM nodes have been created yet. It is about to execute its DOM render effect for the first time. This hook is not called during server-side rendering.

Question 45

onBeforeUpdate

Answer 45

Registers a hook to be called right before the component is about to update its DOM tree due to a reactive state change. Type ts function onBeforeUpdate(callback: () => void): void Details This hook can be used to access the DOM state before Vue updates the DOM. It is also safe to modify component state inside this hook. This hook is not called during server-side rendering.

Question 46

onErrorCaptured()

Answer 46

Registers a hook to be called when an error propagating from a descendant component has been captured. Type ts function onErrorCaptured(callback: ErrorCapturedHook): void type ErrorCapturedHook = ( err: unknown, instance: ComponentPublicInstance | null, info: string ) => boolean | void Details Errors can be captured from the following sources: Component renders Event handlers Lifecycle hooks setup() function Watchers Custom directive hooks Transition hooks The hook receives three arguments: the error, the component instance that triggered the error, and an information string specifying the error source type. TIP In production, the 3rd argument (info) will be a shortened code instead of the full information string. You can find the code to string mapping in the Production Error Code Reference. You can modify component state in errorCaptured() to display an error state to the user. However, it is important that the error state should not render the original content that caused the error; otherwise the component will be thrown into an infinite render loop. The hook can return false to stop the error from propagating further. See error propagation details below.

Question 47

onActivated()

Answer 47

Registers a callback to be called after the component instance is inserted into the DOM as part of a tree cached by . This hook is not called during server-side rendering. Type ts function onActivated(callback: () => void): void See also Guide - Lifecycle of Cached Instance

Question 48

onDeactivated

Answer 48

Registers a callback to be called after the component instance is removed from the DOM as part of a tree cached by . This hook is not called during server-side rendering. Type ts function onDeactivated(callback: () => void): void See also Guide - Lifecycle of Cached Instance

Question 49

onServerPrefetch()

Answer 49

Registers an async function to be resolved before the component instance is to be rendered on the server. Type ts function onServerPrefetch(callback: () => Promise): void Details If the callback returns a Promise, the server renderer will wait until the Promise is resolved before rendering the component. This hook is only called during server-side rendering can be used to perform server-only data fetching.

Question 50

Dependency Injection

Answer 50

provide inject

Question 51

Prop Drilling

Answer 51

Usually, when we need to pass data from the parent to a child component, we use props. However, imagine the case where we have a large component tree, and a deeply nested component needs something from a distant ancestor component. With only props, we would have to pass the same prop across the entire parent chain: We can solve props drilling with provide and inject. A parent component can serve as a dependency provider for all its descendants. Any component in the descendant tree, regardless of how deep it is, can inject dependencies provided by components up in its parent chain.