Document best practices for Vue 2 business code
1. To disable the Watcher

Why is Watcher disabled? In my opinion, Watcher is completely redundant in Vue. It has many disadvantages and few advantages. Let’s start with the advantages. The advantages are fast code writing. There is no need for logic, everything is just Watch. For example, I see a lot of Watcher in the code of our contractors, which is really good for fast development. Because you don’t have to think too much about the logic, you just execute the function if the value changes. As for the disadvantages, there are many:

  • False implicationA Watcher comes with the implication that the variable being watched can be changed by anything, in other words you don’t know what will change the value. This is very cumbersome to maintain, and you often have to read through the code to determine how to modify the relevant business.How to solve it?Get rid of the Watcher and usev-ifThe control component loads and processes the related business within the child component’s Created() hook. In addition, use Computed and Emit to dispatch events to change values. This way the data flow is clearer. Try to make sure that every change in value is traceable.
  • Cluttered nested WatcherThe ability to create more bugs just by using Watcher sounds like a good thing for programmers to create more Bug tickets. This code is written like this: first Watch A, then Watch B, and then modify the properties of A while modifying B, and then modify the properties of B while modifying A. It is better to modify A variable C which cannot be beat eight times, and then change other values of C under Watch. It’s not perfect. I’m sure there’s someone better at abusing Wather than I am.
  • Difficult to testYes, there are many difficulties when writing tests, sometimes Watcher cannot be activated inside tests. I won’t repeat it here. Of course, this is not a problem if you don’t write the test program.
2. Disable Vuex

Vuex, another invention. It is wrong to say that big projects are used and small and medium-sized projects are not used. People who do not understand the most like this cheat, you ask him to say why. My conclusion is don’t use any code. This stuff is overdesign and design errors. Why? Once you use Vuex, there is something wrong with your component design. Of course, what are the shortcomings of this criticism?

  • The logical confusionSome people must say that this thing is how to use it, it will be how to use it. No, I told you this thing doesn’t work. Don’t use it. As the amount of code increases, Vuex can make your code logic very confusing. This Vuex is a global variable, and it flies around. Maintenance takes a lot of time, especially when multiple programmers maintain the same piece of code and work on their own, and after a while the code becomes unreadable. And no one dares to change, a change may be all collapse.
  • Difficult to testIntroduce more redundant mocks when writing tests. And some of the events that are triggered in Vuex are not testable at all so you can’t write the correct tests. If you send events within a test, the test is invalid. Because the logic of your code changed and it still passed.
3. To disable the Mixin

What’s wrong with mixins? The biggest problem with mixins is that they create logical confusion in the code. Code that uses mixins is harder to maintain and easier to read than the export function. It would be a disaster if it was a mix component hook. The only time I think mixins are useful is when multiple components share the same Prop. Other times we really don’t need it.

4. Try not to use Form tags in HTML

Causes incorrect submissions and causes a question mark to be added randomly to the Vue address bar.

5. Use Computed

By multipurpose, you mean to use something when you don’t think you can. The Computed attribute has many advantages. It’s like a read-only variable (if we don’t use a setter). The existence of computational properties reduces a lot of mental burden for Vue programmers. You’ll find that sometimes you can put variables in Data(), which seems to work just as well with computed attributes. The preferred attribute is computed.

I’ll try not to mention the cliches about being like everyone else. It’s boring. So let me write that, and I’ll add it later.