Home > Article > Web Front-end > Detailed explanation of VUE array update

Detailed explanation of VUE array update

小云云Original: 2017-12-19 09:03:212529browse

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>

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

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 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!

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：Detailed explanation of React controlled components and uncontrolled componentsNext article：Detailed explanation of React controlled components and uncontrolled components

See more

Detailed explanation of VUE array update

Related articles