溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了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>
<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=this
for (var i = 0; i <this.imgLen;i++) {
if(_this.userImgsh[i] === '審核成功') continue;
_this.$set(_this.userImgsh, i, '審核成功');
}感謝你能夠認真閱讀完這篇文章，希望小編分享的“VUE如何實現數組更新”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
