詳解VUE 數(shù)組更新
1、數(shù)據(jù)方法分類：
（1）原數(shù)組改變
push
pop
unshift
shift
reverse
sort
splice
（2）原數(shù)組未變，生成新數(shù)組
slice
concat
filter
對于使原數(shù)組變化的方法，可以直接更新視圖。
對于原數(shù)組未變的方法，可以使用新數(shù)組替換原來的數(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>書名：{{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'});
//需要更新原數(shù)組
app.books = app.books.concat([{name: 'c++',author: 'd'}]);
</script>
</body>
</html>
注意：以下不會觸發(fā)視圖的更新。
（1）通過索引直接設(shè)置項。
（2）修改數(shù)組長度，app.books.length=1。
若不想改變原數(shù)組，可以使用計算屬性來過濾數(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>書名：{{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如何監(jiān)聽數(shù)據(jù)的變化呢？
1）如何追蹤變化
每個組件實例都有相應(yīng)的 watcher 實例對象，它會在組件渲染的過程中把屬性記錄為依賴，之后當(dāng)依賴項的 setter 被調(diào)用時，會通知 watcher 重新計算，從而致使它關(guān)聯(lián)的組件得以更新。
2）變化檢測問題
受現(xiàn)代 JavaScript 的限制（以及廢棄 Object.observe），Vue 不能檢測到對象屬性的添加或刪除。由于 Vue 會在初始化實例時對屬性執(zhí)行 getter/setter 轉(zhuǎn)化過程，所以屬性必須在 data 對象上存在才能讓 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)建的實例上動態(tài)添加新的根級響應(yīng)式屬性(root-level reactive property)。然而它可以使用 Vue.set(object, key, value) 方法將響應(yīng)屬性添加到嵌套的對象上：
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, '審核成功');
}
總結(jié)
以上所述是小編給大家介紹的詳解VUE 數(shù)組更新問題，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
通過Vue?3,組合式API增強了我們利用Vue的能力,使我們的代碼更具模塊性和可讀性,本文主要來和大家分享10個常用的Vue3組合式API,希望對大家有所幫助2024-01-01
這篇文章主要介紹了vue腳手架項目創(chuàng)建步驟詳解，文章講解的很清晰，初學(xué)者可以跟著步驟學(xué)習(xí)下2021-03-03
這篇文章主要介紹了vue運行卡死的問題及解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
我們大家在開發(fā)中,經(jīng)常會遇到接口重復(fù)請求導(dǎo)致的各種問題,下面這篇文章主要給大家介紹了關(guān)于axios攔截器之重復(fù)請求取消的相關(guān)資料,需要的朋友可以參考下2021-09-09
加入購物車，是一個登錄后的用戶 才能進行的操作，所以需要進行鑒權(quán)判斷，判斷用戶token是否存在，這篇文章主要介紹了Vue加入購物車判斷token添加登錄提示,需要的朋友可以參考下2023-11-11
因為程序的調(diào)試非常重要,程序猿可以利用好的調(diào)試方法去查找定位自己的問題所在之處,從而,達到糾正自己程序錯誤的地方,健壯自己的程序,讓問題變得越來越少,程序變得越來越健康,所以本文給大家介紹了Vue程序調(diào)試和排錯技巧,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了Vue el-upload單圖片上傳功能實現(xiàn),本文通過示例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
這篇文章主要為大家詳細介紹了Vue使用Echart圖標(biāo)插件之柱狀圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細介紹了vue遞歸實現(xiàn)樹形組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了Vue中的filter與directive的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-05-05