Highlights of Vue.js — Reactivity, Components, Bindings, and More
My company has started using Vue.js in our recent projects with much success. Although it is a relatively new framework, it’s lightweight and easy to integrate into existing applications, while still being a powerful tool when building both small components and sophisticated single-page applications. I recently published a blog post comparing the latest front-end technologies — including Vue, Angular 2+, and React — and explained why Vue.js has become our first choice for new projects. We like to think of the Vue ecosystem as having adopted the best parts of existing frameworks, while leaving clunky and outdated methodologies behind. In this article, I’ll discuss the technical aspects of Vue and the benefits it offers to developers when starting a new project or expanding on an existing endeavor.
Reactivity
One of Vue’s defining features is its underlying reactivity system. Models are just plain JavaScript objects. When a variable in the model (the data object in the Vue instance) is updated, the DOM will ‘react’ and reflect the change without you having to do anything. In the example below, if we change the value of the message property, the HTML will automatically display the new message.
Two-way data binding, which binds the HTML back to the JavaScript, is done by providing some kind of input and using the ‘v-model’ directive, and is similarly reactive.
To do this, Vue walks through all of the properties in the data object and converts them to getter/setters using Object.defineProperty. The getter/setter functions (which are invisible to the user and run under the hood), enable Vue to perform dependency-tracking and change-notification when properties are modified.
Reusable Components
One area where Vue excels is in providing reactive view components, allowing you to encapsulate and reuse code. Think about the structure of an application — it comprises pieces both large and small. You can easily see the value in breaking up those pieces into organized, legible, reusable segments that you can drop into pages, dashboards, etc. This results in a clean codebase that’s easy to debug and modify.
All components are also Vue instances, so they accept the options object and have access to Vue’s handy lifecycle hooks. Vue follows a similar pattern to other front-end frameworks in using parent-child relationships. Props are passed down from parent to child, while data is sent up to the parent through events.
Class and Style Bindings
A much-used feature of Vue is dynamically binding classes and styles to data. For example, you may want to assign a certain class to text based on user input, or change the style of a menu item if it is selected. Vue provides special enhancements when binding :class and :style that makes implementing this functionality straightforward.
Consider the following example:
I want to dynamically assign a class to a button. I set a conditional value, in this case, ‘isActive’ and assign it to ‘true’ in the data object. For this example, I made a click event that toggles the active class. When ‘isActive’ is set to true, the button will be assigned the ‘active’ class and render:
When you click the button again, that class is removed. From there, I gave the class a style that makes the button green when ‘isActive’ is true. You can see how these bindings can be exceptionally helpful when building out a user interface.
You can pass an array to the :class or :style bindings to bind multiple classes and styles. Lastly, a handy pattern is to bind to a computed property that returns an object, where the key is the class to bind and the value is the condition.
Runtime Optimization
Nearly all modern front-end frameworks are super speedy, with React and Vue being exceptionally fast. If you want a performant and powerful UI, you don’t get a much better framework than Vue. Check out these third-party benchmarks which focus on render and update performance.
For us, Vue takes the lead in performance due to the framework’s optimization efforts. In React, when a component’s state changes, the entire component subtree is re-rendered. To avoid re-rendering all of the child components every time, you need to hook into the shouldComponentUpdate lifecycle method or use PureComponent, among other options. Vue, on the other hand, automatically tracks all of a component’s dependencies during render (see the ‘Reactivity’ section above). It therefore knows exactly what to update/re-render during a state change without you having to do the heavy lifting.
Mixins, Custom Directives, and Other Fun
Borrowing some functionality from Angular, Vue offers you the ability to create mixins, which distributes reusable functionality to Vue components. Instead of writing functions multiple times or passing them around through props, a mixin will literally be ‘mixed in’ to a component’s own options, making the logic easily accessible.
In addition to built-in directives (like v-show and v-model), Vue allows you to create your own directives with the v- prefix that can be used throughout the application. This is mostly useful for when you need low-level DOM access on plain elements.
Supporting Libraries
Vue deals with only the view layer — or the ‘V’ in the MVC model. This keeps the framework super small and lightweight. Global state management and routing are handled by companion libraries, with Vuex and Vue Router being the most popular. Other companion libraries, tools, and support are continually popping up (we are particular fans of the Vuetify framework). Check out the vuetify website for more info.
Great Documentation
Vue is fast, intuitive, and easy to learn because it provides a lot of functionality ‘under the hood’. Even though Vue works its magic in a lot of situations, it is important to understand what it is going on behind the scenes, especially when debugging or building out complex features. For this purpose, Vue has clear and extensive documentation that explains how the framework operates and why certain functionalities behave the way that they do.
Note: this was first published on my company’s blog and reposted here with permission. Check us out at http://www.eikospartners.com/!
