Detailed explanation of vue array update method-JS Tutorial-php.cn

Detailed explanation of vue array update method

小云云

Release： 2017-12-18 09:00:15

Original

2697 people have browsed it

This article mainly introduces the issue of VUE array update. The article introduces how vue monitors data changes. Friends who need it can refer to it. I hope it can help everyone.

1. Data method classification:

(1) Original array change

push
pop
unshift
shift
reverse
sort
splice

(2) The original array remains unchanged, generate a new array

slice
concat
filter

For methods to change the original array , the view can be updated directly.

For methods where the original array remains unchanged, you can replace the original array with a new array to change the view.

Sample code:

<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>vue示例</title>
  </head>
  <body>
    <p id="app">
      <ul>
        <template v-for="book in books">
          <li>书名：{{book.name}}</li>
          <li>作者：{{book.author}}</li>
        </template>
      </ul>
    </p>
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
    <script type="text/javascript">
      var app = new Vue({
        el: '#app',
        data: {
          books: [{
              name: 'vuejs',
              author: 'a'
            },
            {
              name: 'js高级',
              author: 'b'
            },
            {
              name: 'java',
              author: 'c'
            }
          ]
        }
      });
      //直接可以使得视图改变
      //app.books.push({name: 'c++',author: 'd'});
      //需要更新原数组
      app.books = app.books.concat([{name: 'c++',author: 'd'}]);
    </script>
  </body>
</html>

Copy after login

Note: The following will not trigger an update of the view.

(1) Set items directly through index.

(2) Modify the array length, app.books.length=1.

If you don’t want to change the original array, you can use calculated properties to filter the array, such as:

 <!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <title>vue示例</title>
  </head>
  <body>
    <p id="app">
      <ul>
        <template v-for="book in filterBooks">
          <li>书名：{{book.name}}</li>
          <li>作者：{{book.author}}</li>
        </template>
      </ul>
    </p>
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.min.js"></script>
    <script type="text/javascript">
      var app = new Vue({
        el: '#app',
        data: {
          books: [{
              name: 'vuejs',
              author: 'a'
            },
            {
              name: 'js高级111',
              author: 'b'
            },
            {
              name: 'java33333',
              author: 'c'
            }
          ]
        },
        computed:{
          filterBooks:function(){
            return this.books.sort(function(a,b){
              return a.name.length>b.name.length?1:-1
            })
          }
        }
      });
    </script>
  </body>
</html>

Copy after login

So how does vue monitor data changes?

1) How to track changes

Each component instance has a corresponding watcher instance object, which will record the properties as dependencies during the component rendering process. Later, when the setter of the dependency is When called, the watcher is notified to recalculate, causing its associated components to be updated.

2) Change detection problem

Due to the limitations of modern JavaScript (and the deprecation of Object.observe), Vue cannot detect the addition or deletion of object properties. Since Vue performs the getter/setter conversion process on the property when initializing the instance, the property must exist on the data object in order for Vue to convert it so that it is responsive. For example:

var vm = new Vue({
 data:{
 a:1
 }
})
// `vm.a` 是响应的
vm.b = 2
// `vm.b` 是非响应的

Copy after login

Vue does not allow dynamically adding new root-level reactive properties to already created instances. However, it can use the Vue.set(object, key, value) method to add response properties to nested objects:

Vue.set(vm.someObject, 'b', 2)

Copy after login

You can also use the vm.$set instance method, which is also the global Vue.set method alias,

The above is the detailed content of Detailed explanation of vue array update method. For more information, please follow other related articles on the PHP Chinese website!