vue數組更新方法詳解-js教程-PHP中文網

vue數組更新方法詳解

小云云

發布： 2017-12-18 09:00:15

原創

2614 人瀏覽過

本文主要介紹了VUE 陣列更新問題，文中給大家介紹了vue如何監聽資料的變化的 ,需要的朋友可以參考下，希望能幫助到大家。

1、資料方法分類：

（1）原始陣列改變

push
pop
unshift
shift
reverse
sort
splice

（2）原始陣列未變，產生新陣列

slice
concat
filter

#對於讓原始陣列變化的方法，可以直接更新視圖。

對於原始數組未變的方法，可以使用新數組取代原來的數組，以使視圖發生變化。

範例程式碼：

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

登入後複製

注意：以下不會觸發視圖的更新。

（1）透過索引直接設定項目。

（2）修改陣列長度，app.books.length=1。

若不想改變原數組，可以使用計算屬性來過濾數組，如：

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

登入後複製

那麼vue如何監聽資料的變化呢？

1）如何追蹤變化

每個元件實例都有對應的watcher 實例對象，它會在元件渲染的過程中把屬性記錄為依賴，之後當依賴項的setter 被呼叫時，會通知watcher 重新計算，從而致使它關聯的元件得以更新。

2）變更偵測問題

受現代 JavaScript 的限制（以及廢棄 Object.observe），Vue 無法偵測到物件屬性的新增或刪除。由於 Vue 會在初始化實例時對屬性執行 getter/setter 轉換過程，所以屬性必須在 data 物件上存在才能讓 Vue 轉換它，這樣才能讓它是回應的。例如：

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

登入後複製

Vue 不允許在已經建立的實例上動態新增的根級響應式屬性(root-level reactive property)。然而它可以使用Vue.set(object, key, value) 方法將回應屬性加入到嵌套的物件上：

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

登入後複製

也可以使用vm.$set 實例方法，這也是全域Vue.set 方法的別名，

以上是vue數組更新方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

vue數組更新方法詳解