“Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.”
1. Use arrow functions inside components
ES6 introduced a new way to define functions. Although it is shorter and faster to type, its power comes from how it defines its scope. But when using the old way of defining functions the scope does not work the way we might intend. You can get the desired behavior by storing the Object instance in a variable or by binding the function scope to the parent container. Instead, we could just use the arrow function. Since it automatically binds its scope to the parent there is no need for additional “fixes”.
2. Take advantage of Single File Components
Single File Components (SFCs) allow us to define reusable templates and separate parts of our app into manageable pieces. But to make that possible we have to build required tools such as Webpack or Browserify to use Single File Components.
The benefits might not be as apparent with small components, but right off the bat we get the syntax highlighting for the template structure and it is easier to visually scan and find what we are looking for.
3. Optimize global plugins
Plugins usually add global-level functionality to Vue. With larger apps we will probably re-use similar methods, computed properties or even components throughout it all. Instead of rewriting methods and importing Single File components inside every component, we can define once and install as a global plugin.
Use plugins by calling the
Vue.use() global method. This has to be done before you start your app by calling
Vue.use automatically prevents you from using the same plugin more than once, so calling it multiple times on the same plugin will install the plugin only once.
4. Use Vuex for state management
Modern web apps manage and update large data sets. An approach which used a lot is to store and manage all the data inside the component. There is nothing wrong with that approach when state sharing across components is not needed. But large applications can often grow in complexity, due to multiple pieces of state scattered across many components and the interactions between them. To solve this problem, Vue offers Vuex: our own Elm-inspired state management library.
Vuex shines in scenarios when we are required to use multiple components that all want to share the same state. Instead of living in the hell of passing all the data through
props to child components, Vuex can store the entire state and have it accessible to all components.
With Vuex we can define the state (data), getters, actions and mutations that can allow us to do everything.
We can also define additional actions and mutations to continue updating the data. Additionally, it maintains the reactive-ness that is Vue.js.
And if you want to learn to code from an app using Vue.js, check out Ai Gijigoku built by ICTS software engineers!