preface

This article aims to solve some simple problems for beginners in using Vue, which is essentially their own use and understanding of Vue is not good enough. Comments are also welcome to point out that this article has not been able to mention the knowledge points and mistakes in the article. So, let’s get started!

Read the official documentation (Vue, Element) carefully and you can avoid most of these problems.

The view is not updated in time

Question:

After you change the data, you will find that the view on the page has not changed, and in the console you will find that the data has changed.

The reason:

Direct manipulation of arrays and objects. Vue cannot listen for changes. When dealing with arrays and objects, you need to operate separately.

Object defineProperty is used to set getters and setters for properties. You cannot add getters and setters to objects and arrays if you add properties directly to them. All properties of objects in data are getters and setters by default, but you can’t add one yourself, for performance reasons. Vue rewrites array methods, so we can use array methods whenever possible. For objects, we usually use deep copy to change the address and never update it.

  • An array of
  1. Point to a brand new array
  2. Use the array method to operate. For example: slice, splice…
  3. Using the $set
  • object
  1. Point it to a brand new object
  2. Use deep copy methods: Object.assign (please note that this is a shallow deep copy, multiple layers will not work), json.parse.
  3. Using the $set

The data was suddenly altered

Question:

After you change the data, you will find that the data on the page has changed accordingly where there is no action.

The reason:

  1. The first thing we need to rule out is whether there are any logic problems (careless problems)
  2. Most likely: parent/child communication, modify data in props at will. Normally, if we change the address of the props data, Vue will raise an error, but if we change the properties of an object, Vue will not raise an error. Of course, that doesn’t rule out you doing it on purpose (this is generally incorrect except for scenarios where we’re designing components).

When we want to modify the data in props, we should make a deep copy of the data, using slice for arrays and Object.assign for objects.

Updates are triggered repeatedly

Question:

After you make data changes, you may find that updates trigger many times.

The reason:

  1. Again, let’s first troubleshoot problems in our own code, whether there are incorrect recursions or writing methods.
  2. Check for duplicate events in different generations of components.
  3. If the data method is updated, the method will find the corresponding update. In general, we will only calculate one result, and it is best not to write too much logic to manipulate data.

The form cannot be entered in Element

Question:

After the Element form was reset, the form could not be entered.

The reason:

Element forms require data initialization (that is, the initial value of the corresponding attribute is written into the mode form), without which the form initialization method cannot be called (resetField). It is important to note that initialization is not defined only in data, as long as we set the form value in the Created declaration cycle function, this step is also initialization.

So, can I clear the form without initializing it? The answer is yes. Sometimes when we query a form, there are too many items in it, and initialization is a hassle. We can replace the resetField with the form object corresponding to the form (mode form) and set it to an empty object. (You can’t do this with checkable forms, because you can’t clear checkable forms, and in this case, you can’t call a function that clears validations alone.)

The form checksum in Element is always wrong

Question:

Verification is not valid on the page and cannot be cleared

The reason:

  1. Validation is not in effect, which is actually not a careful reading of the documentation. We first set the model for the form (remember to initialize), then set rules, and in the form item we need to set prop, which must correspond to the value in the form item. As shown in the figure:

2. The validation cannot be cleared. Please refer to the previous step (the form is not initialized).

Recommended Browser tools

Fehelper: JSON beautification, contrast, timestamp conversion, regular expression, color picker, page performance check, and other common tools.

Vue Devtools: Not to mention, necessary for Vue development (you can view the corresponding data values of components, data in Vuex, etc.).