Understanding the VueJS Instance
If you wish to forget anything on the spot, make a note that this thing is to be remebered.
Edgar Allan Poe
Some Basics about the VueJS Instance
https://jsfiddle.net/jordank/t97n5wsh/4/
The Vue Instance is composed of a collection of properties such as el , data, methods , computed , and watch . This properties handle the business logic of the application, doing their work as a soft of middle-man between the javascript and the rendered application.
Using Multiple Vue Instances
https://jsfiddle.net/jordank/t97n5wsh/8/
It is fine to use multiple instances of VueJS. You just create a new instance and go to town. The kinds of scenarios you might use this method is, for example, you have on one page two completely different 'widgets' or pieces of programing that do not interact in any way. Like you could have a calendar widget and a carousel widget and each would get it's own separate VueJS instances.
Acessing the Vue Instance from Outside
https://jsfiddle.net/jordank/t97n5wsh/13/
Currently we've been creating the VueJS instace using newVue({}); but not storing it in a variable. We can, however do so.
var vm = new Vue({
});
vm - This is any name you like, vm is a common naming pattern short for 'view model'.
By storing the Vue instance in a variable you can then reference it from within another Vue instance. You can also then reference it like you would any other variable using normal javascript. VueJS proxies our properties to make it easier to access them from outside the instance as demonstrated by the setTimeout function in the example.
How VueJS manages you Data and Methods
https://jsfiddle.net/jordank/t97n5wsh/15/
As previously mentioned VueJS will automatically proxy the properties you create in the Vue instance. In order to proxy them it needs to keep track of their states in case of changes. To do so it sets get ers and set ers that will watch the properties and update as necessary.
What you need to keep in mind is that VueJS only proxies properties created in the VueJS instance in this manner. Properties added outside of the instance do not get watched in this manner.
vm1.newProp = 'New!';
In the above snippet we're adding a new property to the vm1 instance. This new property will be added but it will not be assigned get/set ers to keep track of it by the Vue instance.
A closer Look at $el and $data
https://jsfiddle.net/jordank/t97n5wsh/20/
Looking at the results of console logging the Vue instance here. The thing to understand here is that VueJS is not a closed box. It is available to normal outside javascript and it can have normal outside javascript imported into it.
// Setting up a normal JS object
var data = {
title: 'The VueJS Instance',
showParagraph: false
}
// Importing that normal JS object to populate our data property
var vm1 = new Vue({
el: '#app1',
data: data
)};
So in the above example you can see we are creating a normal JS object with some properties. We are then, within the Vue instance, pulling that object in to populate our data property. This seems like it could be useful for working with other API's, libraries etc.
Placing $refs and Using them on your Templates
https://jsfiddle.net/jordank/u3qced2o/8/
ref is a VueJS key that can be placed on any element. Using it you can reference it both inside and outside of your Vue instance.
// HTML
<button ref="myButton">Button</button>
// VueJS
methods: {
logButton: function() {
console.log(this.$refs);
}
}
In the above example we're pulling in a reference to the button DOM element into our Vue instance.
The thing to keep in mind about using ref is that it is not tracked by Vue. That means that it can be easy to make the mistake of using ref to change a value that the Vue instance also controls. What may then occur is unanticipated changes to the ref element (since it does not benefit from the tracking of VueJS).
This can be useful, however, in the situation where you want to retrieve a value or reference a DOM element, but not change it.
Mounting a Template
https://jsfiddle.net/jordank/rmpspuzk/9/
A template is something VuejS creates. It is the representation of the DOM as defined by the Vue Instance before that representation is sent to the Virtual DOM. This template is what VueJS works on. When we change something this change is first done on the template then applied to the Virtual DOM.
// Mount a template in the Vue instance
var vm1 = new Vue({
el: '#app1'
});
// Mount a template by referencing the variable
var vm1 = new Vue({
// Note the absence of el: '#app1' here.
});
vm1.$mount('vm1');
The above method is another way to mount a template to DOM element, that said, it is generally preferable to use the el property as that is what it is there for.
Previously we've been targeting a DOM element that exists in the HTML and attaching the Vue instance to it. It is also possible to create the DOM element in the Vue instance that you would like to mount the instance to by using the template property.
var vm3 = new Vue({
template: '<h1>Hello!</h1>'
});
vm3.$mount('#app3');
In the above code we've created a h1 tag and declared that as the DOM element the Vue instance will be attached to. Then we $mount the variable containing the Vue instance within a specified DOM element. Note that the specified DOM element is not the element that will have the Vue instance applied to it. Still, in this case, that element is the h1 . This method is not one you'd use generally as it is pretty limiting (only simple HTML can be specified in the template ) and VueJS offers much more robust options.
Using Components
https://jsfiddle.net/jordank/rmpspuzk/21/
VueJS has a a system known as a component . It is used to create a repeatable chunk of code that can be used throughout the application. This means in the can used in multiple different Vue instances. Additionally, it can be called multiple times in the same Vue instance, something that is not generally the case if not using a component . Note that when calling a component in the DOM you must still be calling it within an element that is already under control by a Vue instance.
// HTML
<div id="app1">
<hello></hello>
</div>
// VueJS Component
Vue.component('hello', {
template: '<h1>Hello!</h1>'
});
// VueJS Instance that can house a component
var vm1 = new Vue({
el: '#app1'
});
Limitations of some Templates
Templates have to be specified as a string which is limiting.
How VueJS Updates the DOM
One important thing to understand how it detects changes and then updates the page. There is a management layer between the Vue Instance and the DOM called the Virtual DOM. This layer is a representation of the HTML DOM but in javascript. It is in this virtual DOM that VueJS will first watch for changes and make updates. Once a change has happened to the Virtual DOM then that change is sent to the Native DOM. This is done because updating the Native DOM is expensive to do in computer resources (CPU time etc). However, updating the javascript Virtual DOM is much less expensive.
The VueJS Instance Lifecycle
The life cycle starts with new Vue() after that is the first life cycle method we can listen to called beforeCreate() . Then the VueJS instance initializes the data and events passed to the Vue instance. The instance is then created and the created lifecycle method is called. It then compiles the template. The template is derived from the HTML or, if you are using it, the template property defined in the Vue instance. Then right before the Native DOM is updated from the Virtual DOM beforeMount() is called. After this whatever was targeted by the el property is replaced with the compiled template in the Virtual DOM. It's important to understand that at this point it is not yet mounted to the Native DOM. It first does it's compilations to the Virtual DOM. After those compilations are complete Vue then will mount it to the Native DOM where it is visible to the user. The beforeUpdate() lifecycle method is called when the Vue instance sees that the data has changed but before those changes are applied to the Native DOM. And then the updated() lifecycle hook is called after the native DOM has been updated by the Vue instance. The beforeDestroy() lifecycle hook is called right before and Vue instance is destroyed.
VueJS Lifecycle Methods
beforeCreate()- Fired before the vue instance is created. The first life cycle method we can listen to.
created()- The Vue instance is created.
beforeMount()- Called right before the template (the Virtual DOM) is mounted to the Native DOM. In other words this method is called right before Vue updates the HTML with any changes.
beforeUpdate()- Called right before we re-render the DOM. Called when the Vue instance sees that the data has changed but before the Native DOM is re-rendered. As a side note. Given the scenario where the user clicks a button to update a headline to say 'Hello'. Let's say the user clicks this button multiple times. The vue instance knows to not re-render the DOM for each click since in reality nothing is changing after the first click, the title remains the same. That is logic that is not listened to by any lifecycle hook though you might think it would be this one if any.
updated()- Called after the Native DOM has been updated.
beforeDestroy()- Called right before a Vue instance is destroyed.
destroyed()- Called after the Vue instance has been destroyed. Once the vue instance is destroyed all the javascript interactivity is removed. However any changes made to the DOM previously will continue to be there though, again, they are no longer connected to the destroyed vue instance.
The VueJS Instance Lifecycle in Practice
https://jsfiddle.net/9zn9u2h8/18/
The above fiddle demonstrates in practice what we documented in the previous article.