SoFunction
Updated on 2025-04-12

Vue Objects and Data Forced Update Method

Forced updates of objects and data

Array update

The following supports automatic updates

  • push()//Add backward
  • pop()//Delete the last one
  • shift()//Delete the first one
  • unshift()//Add element to the first
  • splice()//Add/Remove elements to the specified location
  • sort()//Sort the elements of the array using the in-place algorithm
  • reverse()//Reverse the positions of elements in the array

Note that this form of modifying data [1] = ‘x’ // is not responsive. In this case, you can use the splice method to modify the data to achieve updates.

Forced update

this.$set(array, subscript, modified value)

eg:this.$set(,1,{})

Object update

Vue cannot detect the addition or removal of object properties:

Forced update

this.$set(, ‘age', 27)

Reference link 

Update data and force update view

During the development process, it is sometimes found that the view is not updated after the data changes. Then here are some common examples and solutions

Object Type

When the object is a reference type, vue may not be able to be monitored. So when we create a new object and assign it to the oldObj field, we directly change its pointing address =====》 methods that can be used in both the object and the array:

this.$set(this,'oldArray',newArray);
this.$set(this,'oldObj',newObj);
this.$set(,‘b',2)

Array type

These do not change the original array, but always return a new array. When using non-mutated methods, the old array can be replaced with the new array.

push(), pop(), shift(), unshift(), splice(), sort(), reverse() can be detected by vue, filter(), concat(), slice().

vue cannot detect arrays with the following changes:

① When you use the index to set an item directly, [indexOfItem] = newValue

② When you modify the length of the array, for example: = newLength

Asynchronous Type

Can be used immediately after data changes

(callback)

In this way, the callback function will be called after the DOM update is completed.

Forced update

this.$forceUpdate(), force view update

vue multi-layer loops, rendering is very slow or not after dynamically changing the data.

For example, there are too many data levels in v-for, and the data has changed after being modified, and the page has not been re-rendered, so it needs to be manually forced to refresh.

The above is personal experience. I hope you can give you a reference and I hope you can support me more.