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> <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。
若不想改變原數組，可以使用計算屬性來過濾數組，如：
<!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 轉換它，這樣才能讓它是響應的。例如：
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 方法的別名，👇是我們在項目中用過的一次，this.imgLen=3,目的使this.userImgsh=["審核成功","審核成功","審核成功"]
var _this=thisfor (var i = 0; i <this.imgLen;i++) { if(_this.userImgsh[i] === '審核成功') continue; _this.$set(_this.userImgsh, i, '審核成功');}總結
以上所述是小編給大家介紹的詳解VUE 數組更新問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
