在VUE中如何實現數組更新功能-js教程-PHP中文網

在VUE中如何實現數組更新功能

亚连

發布： 2018-06-20 15:07:35

原創

1961 人瀏覽過

這篇文章主要介紹了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: &#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>

登入後複製

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

（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: &#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>

登入後複製

那麼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, &#39;b&#39;, 2)

登入後複製

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

以上是在VUE中如何實現數組更新功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！