- Every Vue application starts by creating a new application instance with the createApp function:.
- The application instance is used to register 'globals' that can then be used by components within that application.
- We'll discuss that in detail later in the guide but as a quick example:.
Most of the methods exposed by the application instance return that same instance, allowing for chaining:.
# Creating an Application Instance
You can browse the full application API in the API reference. The options passed to createApp are used to configure the root component.
# The Root Component
That component is used as the starting point for rendering when we mount the application. An application needs to be mounted into a DOM element. For example, if we want to mount a Vue application into, we should pass #app:.
Unlike most of the application methods, mount does not return the application.
Instead it returns the root component instance. Although not strictly associated with the MVVM pattern(opens new window), Vue's design was partly inspired by it.
As a convention, we often use the variable vm (short for ViewModel) to refer to a component instance.
While all the examples on this page only need a single component, most real applications are organized into a tree of nested, reusable components.
For example, a Todo application's component tree might look like this:. Each component will have its own component instance, vm.
For some components, such as TodoItem, there will likely be multiple instances rendered at any one time. All of the component instances in this application will share the same application instance.
# Component Instance Properties
We'll talk about the component system in detail later. For now, just be aware that the root component isn't really any different from any other component.
The configuration options are the same, as is the behavior of the corresponding component instance.
Earlier in the guide we met data properties. Properties defined in data are exposed via the component instance:.
There are various other component options that add user-defined properties to the component instance, such as methods, props, computed, inject and setup.
We'll discuss each of these in depth later in the guide.
All of the properties of the component instance, no matter how they are defined, will be accessible in the component's template.
Vue also exposes some built-in properties via the component instance, such as $attrs and $emit.
These properties all have a $ prefix to avoid conflicting with user-defined property names.
Each component instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes.
Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.
For example, the created hook can be used to run code after an instance is created:. There are also other hooks which will be called at different stages of the instance's lifecycle, such as mounted, updated, and unmounted.
All lifecycle hooks are called with their this context pointing to the current active instance invoking it.
Don't use arrow functions(opens new window) on an options property or callback, such as created: () => console.log(this.a) or vm.$watch('a', newValue => this.myMethod()).
Properties and Methods
# Lifecycle Hooks
Since an arrow function doesn't have a this, this will be treated as any other variable and lexically looked up through parent scopes until found, often resulting in errors such as Uncaught TypeError: Cannot read property of undefined or Uncaught TypeError: this.myMethod is not a function.
Below is a diagram for the instance lifecycle. You don't need to fully understand everything going on right now, but as you learn and build more, it will be a useful reference.
Modified1 month ago. In vue 2+ I can easily get the instance of this as a result I can write something like this,.
# Lifecycle Diagram
What should I do for vue 3 as,. Inside setup(), this won't be a reference to the current activeinstance Since setup() is called before other component options areresolved, this inside setup() will behave quite differently from thisin other options.
This might cause confusions when using setup() alongother Options API.
Muhammad LahinMuhammad Lahin. Vue 3 provides getCurrentInstance() inside the setup() hook. That instance allows access to global properties (installed from plugins) via appContext.config.globalProperties:.
1414 gold badges143143 silver badges200200 bronze badges. 200200 bronze badges. Maybe this is a beginner question but I cant access Vue instance defined in Main.js from a component.
I coded Vue.i18n.set(‘en’) in main.js but I want to change it inside a component using the vue instance. code in main.js where Vue defined. When I debug, I see Vue near $root as below, but I dont knokw whether that means its same Vue or Vue is under it ?