详解VUE 数组更新

时间:2021-03-17 14:49:54

1、数据方法分类:

(1)原数组改变

push
 pop 
 unshift
 shift
 reverse
 sort
 splice

(2)原数组未变,生成新数组

slice
 concat 
 filter

对于使原数组变化的方法,可以直接更新视图。

对于原数组未变的方法,可以使用新数组替换原来的数组,以使视图发生变化。

示例代码:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang= "zh" >
   <head>
     <meta charset= "UTF-8" />
     <title>vue示例</title>
   </head>
   <body>
     <div id= "app" >
       <ul>
         <template v- for = "book in books" >
           <li>书名:{{book.name}}</li>
           <li>作者:{{book.author}}</li>
         </template>
       </ul>
     </div>
     <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>

注意:以下不会触发视图的更新。

(1)通过索引直接设置项。

(2)修改数组长度,app.books.length=1。

若不想改变原数组,可以使用计算属性来过滤数组,如:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<html lang= "zh" >
   <head>
     <meta charset= "UTF-8" />
     <title>vue示例</title>
   </head>
   <body>
     <div id= "app" >
       <ul>
         <template v- for = "book in filterBooks" >
           <li>书名:{{book.name}}</li>
           <li>作者:{{book.author}}</li>
         </template>
       </ul>
     </div>
     <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>

那么vue如何监听数据的变化呢?

1)如何追踪变化

每个组件实例都有相应的 watcher 实例对象,它会在组件渲染的过程中把属性记录为依赖,之后当依赖项的 setter 被调用时,会通知 watcher 重新计算,从而致使它关联的组件得以更新。

2)变化检测问题

受现代 JavaScript 的限制(以及废弃 Object.observe),Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。例如:

?
1
2
3
4
5
6
7
8
var vm = new Vue({
  data:{
  a:1
  }
})
// `vm.a` 是响应的
vm.b = 2
// `vm.b` 是非响应的

Vue 不允许在已经创建的实例上动态添加新的根级响应式属性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上:

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

还可以使用 vm.$set 实例方法,这也是全局 Vue.set 方法的别名,

相关文章