SoFunction
Updated on 2025-04-05

Detailed explanation of VUE array update

1. Data method classification:

(1) The original array changes

push
 pop
 unshift
 shift
 reverse
 sort
 splice

(2) The original array has not changed, and a new array is generated

slice
 concat
 filter

For methods that change the original array, you can directly update the view.

For methods that have not changed the original array, you can replace the original array with the new array to make the view change.

Sample code:

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>vueExample</title>
  </head>
  <body>
    <div >
      <ul>
        <template v-for="book in books">
          <li>Book title：{{}}</li>
          <li>author：{{}}</li>
        </template>
      </ul>
    </div>
    <script src="/vue/2.5.9/"></script>
    <script type="text/javascript">
      var app = new Vue({
        el: '#app',
        data: {
          books: [{
              name: 'vuejs',
              author: 'a'
            },
            {
              name: 'js advanced',
              author: 'b'
            },
            {
              name: 'java',
              author: 'c'
            }
          ]
        }
      });
      //Can directly change the view      //({name: 'c++',author: 'd'});
      //The original array needs to be updated       = ([{name: 'c++',author: 'd'}]);
    </script>
  </body>
</html>

Note: The following will not trigger updates to the view.

(1) Set items directly through indexes.

(2) Modify the array length, =1.

If you do not want to change the original array, you can use the computed properties to filter the array, such as:

 <!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>vueExample</title>
  </head>
  <body>
    <div >
      <ul>
        <template v-for="book in filterBooks">
          <li>Book title：{{}}</li>
          <li>author：{{}}</li>
        </template>
      </ul>
    </div>
    <script src="/vue/2.5.9/"></script>
    <script type="text/javascript">
      var app = new Vue({
        el: '#app',
        data: {
          books: [{
              name: 'vuejs',
              author: 'a'
            },
            {
              name: 'js Advanced 111',
              author: 'b'
            },
            {
              name: 'java33333',
              author: 'c'
            }
          ]
        },
        computed:{
          filterBooks:function(){
            return (function(a,b){
              return >?1:-1
            })
          }
        }
      });
    </script>
  </body>
</html>

So how does vue listen to changes in data?

1) How to track changes

Each component instance has a corresponding watcher instance object, which records the attributes as dependencies during component rendering. After that, when the setter of the dependency is called, the watcher will be notified to recalculate, so that the components it associated with can be updated.

2) Change detection problem

Due to modern JavaScript limitations (and discarded), Vue cannot detect the addition or removal of object properties. Since Vue performs a getter/setter conversion process on the property when initializing the instance, the property must exist on the data object to allow Vue to convert it so that it can be responsive. For example:

var vm = new Vue({
 data:{
 a:1
 }
})
// `` is responsive = 2
// `` Yes and non-responsive

Vue does not allow dynamic addition of new root-level reactive properties on the instances that have been created. However, it can use the (object, key, value) method to add response properties to nested objects:

(, 'b', 2)

You can also use the vm.$set instance method, which is also an alias for the global method. 👇 is one time we used it in the project. =3, the purpose is to make =["Audit Success", "Audit Success", "Audit Success"]

var _this=this
for (var i = 0; i <;i++) {
  if(_this.userImgsh[i] === 'Audit successful') continue;
    _this.$set(_this.userImgsh, i, 'Audit successful');
}

Summarize

The above is a detailed explanation of the VUE array update problem introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message. The editor will reply to everyone in time!