How not to Vue

A list of bad things I’ve found on my new job

Here’s what some people do

Click here to share this article on LinkedIn »

Not so long ago, I got a new job. And when I saw the code base for the first time, it terrified me. Here I want to show the things you should avoid in Vue.js applications.

Static properties in data/computed

There are no reason to pass static properties to data and especially in computed. When you do it, Vue makes these properties reactive but it’s unnecessary.

DON’T. phone and city have useless reactivity

DO. Pass them to $options. It’s shorter and no useless work here

Thinking that non-reactive data will be reactive

Remember: Vue is not wizard. Vue doesn’t know when your cookies update.

I mentioned cookies because my colleague spent 2 hours to understand why his computed property doesn’t update.

DON’T. Computed properties should be based only on Vue reactive data. Otherwise, it just won’t work

DO. Update your non-reactive things manually.

Also, I recommend you not to use any side-data in computed properties. There should be no side effects in your computed properties. It will save you a lot of time. Believe me

Mixins with things that should be done once

Mixins are fine *somebody closes post right now*… Mixins are fine in some cases:

1. Creating plugins that modifies Vue instance, giving new features
2. Using common specific methods in different components/throughout the application

But one man made a global mixin with very slow actions in mounted hook. Why not? Because it is being called on each component mount but may be called only once as well.

I won’t show this code. Instead, to make it clearer, I’ll show you a simpler example.

DON’T. Avoid doing this in mixins. It will be called on each component mount when you don’t need that

DO. Do this work in the root instance. It will be called only once. You still have access to the result using $root

Incorrect work with setTimout/setInterval

At an interview, one of frontend developers in my team asked me if we can use timeouts/intervals in components. I answered “Yes” and wanted explain how to do it correctly but I was blamed as incompetent.

I dedicate this part to a man after whose code I have to maintain now

DON’T. You can use intervals. But you forget to use clearInterval and will get error on component unmount

DO. Use clearInterval in beforeDestroy hook to clear intervals

DO. If you don’t want to care about, use vue-timers

Mutating parents

Thing that I really don’t like in Vue and want to be removed (Evan, please)

I see no real use cases to use $parent. It makes components inflexible and may confuse you with unexpected problems.

DON’T. Vue will warn you if you’ll try to mutate props but Vue can’t detect mutations via $parent

DO. Use events emitter and listen to events. Also, v-model directive is just sugar for value prop + input event

DO. Vue has one more sugar: .sync modifier that updates prop on update:prop event

If/else form validation

I was really confused when I’ve found forms with manual validation. It generates lots of useless boilerplate code.

DON’T. I was terrified by similar code in my new project. Don’t be foolish, there are a lot of solutions for that

DO. Use vuelidate. Just one line with validation rules for each field. Clean and declarative code

DO. I also made a small plugin that allows you to declare form data and validations with one object

Instead of conclusion

It’s not all sins that junior Vue.js developers do, and I’m sure that this list may be infinite. But I think it‘s quite enough.

So, what “interesting” things did you see in Vue.js projects? Respond here if you have what to tell :)

Thanks for reading! And don’t repeat dumb errors :)

Special thanks to people who contribute to carbon.now.sh. It’s really nice!