• How not to Vue: A list of bad things I’ve found on my new job
  • By Anton Kosykh
  • Translation from: The Gold Project
  • This article is permalink: github.com/xitu/gold-m…
  • Translator: sophiayang1997
  • Proofreader: Kezhenxu94 xxHolly32

Here are some of them.

Not long ago, I got a new job. And when I first saw the code base, it really freaked me out. So I want to show you some code here that you should avoid in vue.js applications.

Static attributes in data/computed

There is no reason to pass static properties to data, especially computed. When you do this, Vue declares it as a responsive property, but this is unnecessary.

The responsiveness of DON’t. Phone and City is useless.

DO. Pass static properties to $options. It’s shorter and doesn’t do extra work.

Consider turning non-reactive data into reactive data.

Remember: Vue doesn’t have the power. Vue doesn’t know when your cookies will be updated.

The reason I mention cookies is that my colleague once spent two hours trying to figure out why his computed attributes weren’t updated.

Calculated attributes should only be used based on Vue’s reactive data. Otherwise, it will not work.

DO. Manually update your non-responsive data.

In addition, I recommend that you do not use any side-data in your computed properties. There should be no side effects in your computed properties. Doing so will save you a lot of time. Believe me.

A mixins object that should only be called once

As soon as I said mixins were good, someone shut this post down… Mixins are useful in a few situations:

  1. Create a plug-in that can modify the Vue instance to provide new functionality.
  2. Use specific methods that are common across different components or across the entire application.

Unless someone has registered a global mixin object on a Mounted hook that performs very slowly. Why not? Because the global mixin object is called every time a component is mounted, but in principle it can only be called once.

I’m not going to show you this code. Instead, to make it clearer, I’ll give you a simpler example.

DON’t do this in mixins. It will be called on each component mount, even if you don’t need to.

DO. Perform this operation in the root instance. So it’s only going to be called once. You can still access the results using $root.

Incorrect use of setTimout/setInterval

During an interview, a front-end developer on my team asked me if I could use setTimout/setInterval in components. I said “yes,” but before I could explain how to use it properly, I was accused of being unprofessional.

Now I have to maintain someone’s code, so I dedicate this paragraph to him.

You can use intervals. But if you forget to use clearInterval, you will get an error during component uninstallation.

DO. Use clearInterval in the beforeDestroy hook to clear the interval.

DO. If you don’t want the hassle, consider using Vue-Timers.

The parent instance of the mutation

This is one of my least favorite Vue designs and I really hope to get it removed one day (Rain Creek, please).

I haven’t seen a real use case with $parent. It makes the components more mechanical and creates some problems that you might not expect.

If you try to change props, Vue will warn you, but if you try to change props with $parent, Vue will not detect it.

DO. Use Events Emitter to listen for events. Furthermore, v-Model is just the syntactic sugar for the value attribute and the input event.

Do.vue also has a syntactic sugar:.sync modifier for updating a prop in the update:prop event.

If/ ELSE form validation

I was confused when I found some forms that required manual validation. It produces a lot of boilerplate code.

I was horrified by similar code on my new project. Don’t be so stupid. There are many possible solutions to this problem

DO. Use vuelidate. What clean and declarative code with only one validation rule per field.

I’ve also created a widget that allows you to declare form data and validation using an object.

The last

Not all of this is the fault of vue.js junior developers, of course, and I’m sure the list of problems is probably infinite, but I think it’s enough.

So, if you see something “interesting” in vue.js, you can reply to me here :).

Thanks for reading! Remember not to repeat stupid mistakes 🙂 special thanks to the people who contributed to carbon.now.sh. Milk to think!

Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.