vue數組更新方法詳解

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

1、資料方法分類：

（1）原始陣列改變

push
 pop
 unshift
 shift
 reverse
sort
 splice

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

slice
 concat
 filter

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

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

範例程式碼：

nbsp;html>

  
    <meta>
    <title>vue示例</title>
  
  
    <p>
      </p>

               

         <script></script>     <script> 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>   

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

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

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

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

 nbsp;html>

  
    <meta>
    <title>vue示例</title>
  
  
    <p>
      </p>

               

         <script></script>     <script> 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>   

那麼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中文網其他相關文章！