“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.”
After created by Evan You in 2014, Vue.js has a Vue’s community growing incredibly fast along the years, the community contributed a lot of code together and shared experiences when working with Vue.js. So, Vue.js has become one of the popular JavaScript frameworks as well as Angular.js and React.js. Here are a couple of tips to help you work with Vue.js more effectively!
How to work with Vue.js more effectively
1. Use arrow functions inside components
ECMA Script is the standardized name for JavaScript, and ES6 refers to version 6 of the ECMA Script programming language.
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
These 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 new Vue().
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: their 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!
Source: https://itnext.io/four-tips-for-working-with-vue-js-b362d97de852
0 Comment