7 Common Vue.js Mistakes You Should Never Make
In this article, you will learn about seven vue.js mistakes developers should never make while working with vue.js
Join the DZone community and get the full member experience.Join For Free
I was using different frameworks but have not used Vue.js until recently. My friend told me about Vue.js and encouraged me to give it a try. When I started using Vue.js, I encountered several issues, problems, challenges, and even made a lot of mistakes along the way. So, I decided to share my experience with others so that other developers don’t have to go through the same ordeal as I did.
If you are not familiar with Vue.js is, Vue is basically a framework for designing user interfaces. What differentiates it from other frameworks is that it is designed with incremental adaptability in mind. Even the main library focuses on the view layer, but it can easily be integrated with other libraries.
Additionally, the Vue framework is powerful enough to handle single-page apps when you combine them with modern tools and supporting libraries. Let us look at some of the pros and cons of Vue.js to give you a better idea.
Pros and Cons of Vue.js
- Small Community
Unfortunately, most developers fail to take advantage of Vue.js full potential because they don't follow the Vue.js best practices and make common mistakes.
In this article, you will learn about seven vue.js mistakes developers should never make while working with vue.js.
1. Adding Template Compiler
It did not take me long to encounter my first problem with Vue.js. As I tried to import it, I noticed that the inline template for your component returns a blank page even if you follow the instruction provided in the official guide. When I tried to define templates through the render function or as a single file component, those issues did not occur. This could happen due to differences in builds as vue has many different builds. The default build exported by the NPM package is usually the runtime only build, which does not include the template compiler.
2. Maintaining Property Reactivity
React users will be familiar with the concept of reactivity. It works by calling a setState function. This function updates the value of the properties. Even though it is one of the biggest advantages of vue.js but it works a little differently in Vue as it does in React. In Vue, it proxies the component properties. Get and set functions are used for overriding and updates are delivered in a virtual DOM.
Here is a code snippet to explain it.
In this example, you can clearly see that the Vue instance has a property called an item that contains an empty object. When components are initialized, Vue creates a proxy with getting and set functions linked to item property. Due to this, frameworks keep track of fluctuations in value and react accordingly.
3. Exporting Single File Components
- Direct export
- Named export
- Default export
If you choose the named export option, you will not be able to rename the components. This means that it will also be prone to tree shaking. More importantly, named exports are not compatible with single-file components. You are better off using a default export method as compared to a named export method.
4. Avoid Combining Single File Components
Single file components can streamline your development process as it enables developers to add code, template, and styling in a single file. It is also important to keep separation otherwise, it can quickly get messy. There is also the risk of imported SFCs overriding previous SFCs, so you need to be extra cautious when combining SFCs. The biggest downside of SFCs is that you can not import them in multiple Vue components.
5. Updating Parent Data from Child Component
In Vue.js, parents pass data down to the child component using props and the child responds or sends a message by using events. This relationship can also be called props down and event up. Here is a code snippet that shows how to pass props to a child element.
6. Showing Promise From Vuex Actions
Since the actions in Vuex are asynchronous, the only way to let the calling function know whether the action is complete or not. It returns a promise and resolves it later. It makes an HTTP call and resolves and rejects the promise later one by one.
7. Using Vue.js and jQuery in Conjunction
If you want to use the Vue framework in conjunction with other DOM manipulating toolkits such as jQuery, you will have to segregate it. You can either use a jQuery to manipulate a DOM widget or use Vue, but not both at the same time. A wrapper component acts as a link between Vue, components, and internal DOM elements. It allows Vue to interact with components and the components will be used to manipulate the internal DOM elements through jQuery.
If you are using the Vue.js framework to design app development solutions or creating web applications, then should avoid making these mistakes. Which is the biggest mistake you have ever made with vue.js? Let us know in the comments section below.
Published at DZone with permission of Irfan Ahmed. See the original article here.
Opinions expressed by DZone contributors are their own.