In the previous chapter, we gained some familiarity with Vue.js. We were able to use it in two different applications that we created from scratch. We learned how to integrate Vue.js into an already existing project. We were able to see Vue's reactive data binding in action.
Now, you are probably asking yourself: how does it work? What does it do to achieve this behavior of fast UI changes when the data model is changed? Probably, you decided to use Vue.js in your project and are now wondering whether it follows some architectural pattern or paradigm so that you should adopt it in your project. In this chapter, we will explore the key concepts of the Vue.js framework to understand all its behind the scenes features. Also in this chapter, we will analyze all the possible ways of installing Vue.js. We will also create a skeleton for our applications, which we will develop and enhance through the next chapters. We will also learn ways of debugging and testing our applications.
So, in this chapter, we are going to learn:
- What the MVVM architecture paradigm is and how it applies to Vue.js
- What declarative Views are
- How Vue.js explores defined properties, getters, and setters
- How reactivity and data binding works in Vue.js
- What dirty checking, DOM, and virtual DOM are
- The main differences between Vue.js 1.0 and Vue.js 2.0
- What reusable components are
- How plugins, directives, custom plugins, and custom directives work in Vue.js
- How to install, start, run, and debug a Vue application
Do you remember how we were creating the Vue instance in the first chapter? We were instantiating it calling new Vue({...}). You also remember that in the options, we were passing the element on the page where this Vue instance should be bound and the data object that contained the properties we wanted to bind to our View. The data object is our Model and the DOM element where the Vue instance is bound is our View:
Classic View-Model representation where the Vue instance binds one to another
In the meantime, our Vue instance is something that helps to bind our Model to the View and vice versa. Our application thus follows Model-View-ViewModel (MVVM) pattern, where the Vue instance is a ViewModel:
The simplified diagram of the Model-View-ViewModel pattern
Our Model contains data and some business logic, and our View is responsible for its representation. ViewModel handles data binding, ensuring that the data changed in the Model is immediately affecting the View layer and vice versa.
Our Views thus become completely data driven. ViewModel becomes responsible for the control of the data flow, making data binding fully declarative for us.