Detailed explanation of VUE array update-JS Tutorial-php.cn

Detailed explanation of VUE array update

小云云

Release： 2017-12-19 09:03:21

Original

2561 people have browsed it

Regarding vue array update, 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 and a new array is generated

slice
concat
filter

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

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: &#39;#app&#39;,
        data: {
          books: [{
              name: &#39;vuejs&#39;,
              author: &#39;a&#39;
            },
            {
              name: &#39;js高级&#39;,
              author: &#39;b&#39;
            },
            {
              name: &#39;java&#39;,
              author: &#39;c&#39;
            }
          ]
        }
      });
      //直接可以使得视图改变
      //app.books.push({name: &#39;c++&#39;,author: &#39;d&#39;});
      //需要更新原数组
      app.books = app.books.concat([{name: &#39;c++&#39;,author: &#39;d&#39;}]);
    </script>
  </body>
</html>

Copy after login

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

(1) Set items directly by 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: &#39;#app&#39;,
        data: {
          books: [{
              name: &#39;vuejs&#39;,
              author: &#39;a&#39;
            },
            {
              name: &#39;js高级111&#39;,
              author: &#39;b&#39;
            },
            {
              name: &#39;java33333&#39;,
              author: &#39;c&#39;
            }
          ]
        },
        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 the data? What about 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, and then When the dependency's setter is 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 dynamic addition of new root-level reactive properties on 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, &#39;b&#39;, 2)

Copy after login

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

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