Home > Article > Web Front-end > How to implement array update function in VUE

How to implement array update function in VUE

亚连Original: 2018-06-20 15:07:351954browse

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

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 the method of changing 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>

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>

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, 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` 是非响应的

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)

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 How to implement array update function in VUE. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use vue-cli to implement multi-page applicationsNext article：How to use vue-cli to implement multi-page applications

See more

How to implement array update function in VUE

Related articles