Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.
In this article, we’ll look more closely at the Vue instance, including how to define it and some properties of it.
Characteristics of the Vue Instance
Each Vue.js app begins by defining a new Vue instance. The Vue constructor takes an options object that takes various properties.
We often use vm to refer to a Vue instance, where vm stands for ViewModel.
A Vue app roughly follows the Model-View-ViewModel pattern, where the ViewModel has the business logic of the app, View has the markup that users see, and Model has the data.
For example, we can define a Vue instance as follows:
const vm = new Vue({ });
Each Vue app consists of a root Vue instance and it’s created with new Vue . We can organize it in a tree for easier maintenance.
Data and Methods
The options object that pass into the Vue constructor can have data and methods.
For example, if we define a Vue instance as follows:
const vm = new Vue({
el: "#app",
data: { foo: "bar" }
});
Then when we add:
console.log(vm.foo);
below our vm definition, we get 'bar' since data.foo has the value 'bar' .
In other words, if we have:
const data = { foo: "bar" };
const vm = new Vue({
el: "#app",
data
});
console.log(vm.foo === data.foo);
Then the console.log will log true .
When the data changes, the app will re-render with the new data.
If we create a new property in vm and set it as follows:
let data = { foo: "bar" };
const vm = new Vue({
el: "#app",
data
});
vm.a = 1;
The app won’t re-render. On the other hand, if we write:
let data = { foo: "bar", a: 1 };
const vm = new Vue({
el: "#app",
data
});
Then the app will re-render. This means that we have to put our data that we want to render in the data field.
If we freeze the object that we pass to data with Object.freeze() , then the Vue app won’t re-render since properties can’t be changed, so new changes can’t propagate since they aren’t set in the object.
So if we have:
let data = { foo: "bar", a: 1 };
Object.freeze(data);
const vm = new Vue({
el: "#app",
data
});
No changes can be made after the initial render since we froze data with Object.freeze .
The Vue instance also exposes a number of instance properties and methods.
They’re prefixed with the $ so that we know they’re part of the Vue instance.
$el
We have the $el property to get the DOM element that the Vue instance resides in.
For example, if we have:
let data = { foo: "bar" };
const vm = new Vue({
el: "#app",
data
});
console.log(vm.$el === document.getElementById("app"));
Then the console.log will log true since our Vue instance resides in an element with ID app .
$data
The $data property will get us the value of the data property that we set in the options object that we passed into the Vue constructor.
So if we have:
let data = { foo: "bar" };
const vm = new Vue({
el: "#app",
data
});
console.log(vm.$data === data);
Then we get true from the console.log since data references the same object as vm.$data since we set it as the value of the data property of the options object that we passed into the Vue constructor.
$watch
$watch is an instance method that lets us watch for changes in the data object that we set as the value of the options object.
For example, if we have:
let data = { foo: "bar" };
const vm = new Vue({
el: "#app",
data
});
vm.$watch("foo", (newValue, oldValue) => {
console.log(newValue, oldValue);
});
in src/index.js and:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<meta charset="UTF-8" />
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head> <body>
<div id="app">
<input type="text" v-model="foo" />
</div>
<script src="./src/index.js"></script>
</body>
</html>
in index.html . Then when we type in something to the input box, we should get some console.log output from:
vm.$watch("foo", (newValue, oldValue) => {
console.log(newValue, oldValue);
});
This is because changes are constantly being watched in the data.foo property. v-model automatically updates the value for foo as we type into the box.
So as we’re typing, the changes to foo are being watched and it’s logged by the handler function that we passed into the $watch method.
Conclusion
The Vue instance is created by passing in an options object with the data , el , and methods properties to the Vue constructor. It returns an instance of our Vue app.
The instance has the $el property to get the DOM element that our app resides in.
Also, there’s the $data property to get the value of the data property to get the data that we set when we pass it in as the value of the data property of the options object.
Finally, we have the $watch method to watch for changes in our data.
