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