VUE如何實(shí)現(xiàn)數(shù)組更新

發(fā)布時(shí)間：2021-07-22 15:47:03 來(lái)源：億速云閱讀：128 作者：小新欄目：web開(kāi)發(fā)

這篇文章主要介紹了VUE如何實(shí)現(xiàn)數(shù)組更新，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

1、數(shù)據(jù)方法分類：

（1）原數(shù)組改變

push
pop
unshift
shift
reverse
sort
splice

（2）原數(shù)組未變，生成新數(shù)組

slice
concat
filter

對(duì)于使原數(shù)組變化的方法，可以直接更新視圖。

對(duì)于原數(shù)組未變的方法，可以使用新數(shù)組替換原來(lái)的數(shù)組，以使視圖發(fā)生變化。

示例代碼：

<!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>書(shū)名：{{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高級(jí)',
              author: 'b'
            },
            {
              name: 'java',
              author: 'c'
            }
          ]
        }
      });
      //直接可以使得視圖改變
      //app.books.push({name: 'c++',author: 'd'});
      //需要更新原數(shù)組
      app.books = app.books.concat([{name: 'c++',author: 'd'}]);
    </script>
  </body>
</html>

注意：以下不會(huì)觸發(fā)視圖的更新。

（1）通過(guò)索引直接設(shè)置項(xiàng)。

（2）修改數(shù)組長(zhǎng)度，app.books.length=1。

若不想改變?cè)瓟?shù)組，可以使用計(jì)算屬性來(lái)過(guò)濾數(shù)組，如：

 <!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>書(shū)名：{{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高級(jí)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如何監(jiān)聽(tīng)數(shù)據(jù)的變化呢？

1）如何追蹤變化

每個(gè)組件實(shí)例都有相應(yīng)的 watcher 實(shí)例對(duì)象，它會(huì)在組件渲染的過(guò)程中把屬性記錄為依賴，之后當(dāng)依賴項(xiàng)的 setter 被調(diào)用時(shí)，會(huì)通知 watcher 重新計(jì)算，從而致使它關(guān)聯(lián)的組件得以更新。

2）變化檢測(cè)問(wèn)題

受現(xiàn)代 JavaScript 的限制（以及廢棄 Object.observe），Vue 不能檢測(cè)到對(duì)象屬性的添加或刪除。由于 Vue 會(huì)在初始化實(shí)例時(shí)對(duì)屬性執(zhí)行 getter/setter 轉(zhuǎn)化過(guò)程，所以屬性必須在 data 對(duì)象上存在才能讓 Vue 轉(zhuǎn)換它，這樣才能讓它是響應(yīng)的。例如：

var vm = new Vue({
 data:{
 a:1
 }
})
// `vm.a` 是響應(yīng)的
vm.b = 2
// `vm.b` 是非響應(yīng)的

Vue 不允許在已經(jīng)創(chuàng)建的實(shí)例上動(dòng)態(tài)添加新的根級(jí)響應(yīng)式屬性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對(duì)象上：

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

還可以使用 vm.$set 實(shí)例方法，這也是全局 Vue.set 方法的別名，?是我們?cè)陧?xiàng)目中用過(guò)的一次，this.imgLen=3,目的使this.userImgsh=["審核成功","審核成功","審核成功"]

var _this=this
for (var i = 0; i <this.imgLen;i++) {
  if(_this.userImgsh[i] === '審核成功') continue;
    _this.$set(_this.userImgsh, i, '審核成功');
}

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“VUE如何實(shí)現(xiàn)數(shù)組更新”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

向AI問(wèn)一下細(xì)節(jié)

VUE如何實(shí)現(xiàn)數(shù)組更新

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽