What should I do if vue does not refresh the current page?

The solutions to vue not refreshing the current page are: 1. Define a threshold in data, with code such as "this.show = false;setTimeout(() => {this.show = true},0 )"; 2. After the data is processed, use "this.$froceUpdate()" to force refresh; 3. After the data processing is completed, perform data reset operation; 4. Use the "this.$set" global method. Data updates, etc.

#The operating environment of this tutorial: Windows 10 system, Vue version 3, Dell G3 computer.

What should I do if vue does not refresh the current page?

The data update page in the vue project does not refresh.

This situation can be divided into many types. But the reason is that versions below vue3.0 cannot Monitor changes in objects (including arrays and objects). When the data changes, Vue's refresh mechanism cannot detect data changes, so we need to achieve the purpose of page refresh through various processes during the actual application process.

1. This is a simple and crude solution, which is to rearrange and redraw the page after the data update is completed. However, the consumption of the page will increase sharply in this way. It is better not to use it as a last resort. The specific implementation method is as follows:

Define a threshold in data, such as show, initially true;

Code implementation:

this.show = false;
setTimeout(() => {
 
  this.show = true
 
},0)

2. After the data is processed, use this.$froceUpdate() to force refresh;

3. After the data processing is completed, perform a data reset operation, but It is worth noting that this method is only valid for objects (I personally tested the array and it is invalid. If any friends can get it, please leave a message and let me worship it, hehe), and this method is not suitable for objects with key values ​​​​of reference types. Data source (for this method, I personally think that the template for displaying reference type data can be encapsulated in a separate component, and then the data can be refreshed in this component. Of course, monitoring data changes is essential. This method has not been tested. It stands to reason Said it should be no problem)

let temp = this.data;
this.data = null;
this.data = temp

4. Use the official method and use this.$set global method to update the data; here we will talk about the data binding mechanism of vue; when a page is created In the process, the html template will only bind the data that already exists in the data when it is initially created. If we append data after the page is created, the data will be updated, but the page will not be refreshed, this.$set (Data source, key of the data to be appended/index in the source data, new data) This method is officially provided by Vue for appending data, and can achieve page refresh!

5. For array data, common reasons why the page does not refresh after modifying the data are:

• Modify array elements through array subscripts

• Modify the array length

Then when modifying the array data, we should use push(), pop(), shift(), unshift(), splice(), Use native methods such as sort() and reverse() to manipulate data, because Vue can directly detect changes in array data caused by these methods.

6. The most fundamental reason why the data is not refreshed is because Vue believes that the template structure has not been updated, so it will not generate a new virtual dom, so we can add a new virtual dom to the dom that needs to be updated, which will occur after the operation ends. Change the key value, so it will be refreshed (this is a new skill I learned recently, I will add more).

Recommended learning: "vue video tutorial"

The above is the detailed content of What should I do if vue does not refresh the current page?. For more information, please follow other related articles on the PHP Chinese website!