Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "Vue objects and data how to force update", the content is detailed, the steps are clear, the details are handled properly, I hope this "Vue objects and data how to force update" article can help you solve your doubts, the following follow the editor's ideas slowly in-depth, together to learn new knowledge.

Forced update array updates for objects and data

The following supports automatic updates

Push () / / add backwards

Pop () / / Delete the last one

Shift () / / Delete the first

Unshift () / / add an 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 () / / reverses the position of the elements in the array

Note that it is not responsive to modify the data this.arr [1] ='x'/ / in this form. In this case, you can update the data by modifying the data using the splice method.

Forced update

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

Eg:this.$set (this.dataArr,1, {})

Object update

Vue cannot detect the addition or removal of object attributes:

Forced update

This.$set (this.obj, 'age', 27)

Reference link

Update data and force view update

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

Object Typ

When an object is a reference type, vue may not be able to monitor it, so when we create a new object and assign a value to the oldObj field, we directly change its pointing address = "methods that can be used by both objects and arrays:

This.$set (this,'oldArray',newArray); this.$set (this,'oldObj',newObj); this.$set (this.some.name,'b',2) array type

These do not change the original array, but always return a new array. When using a non-mutation method, you can replace the old array with a new array.

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

Vue cannot detect an array of the following changes:

① when you set an item directly using the index, vm.items [indexOfItem] = newValue

② when you modify the length of an array, for example: vm.items.length = newLength

Asynchronous type

Can be used immediately after the data changes

Vue.nextTick (callback)

In this way, the callback function is called after the DOM update is complete.

Forced update

This.$forceUpdate (), forcing view updates

Vue multi-layer loop, rendering slowly or not after dynamically changing the data.

For example, there are too many data layers in v-for, the modified data has changed, and the page has not been re-rendered, so you need to manually refresh it.

After reading this, the article "how to forcibly update Vue objects and data" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.