詳解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ù)組替換原來(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>書名：{{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ì)算屬性來(lái)過濾數(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中的嚴(yán)格模式如何取消，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue倉(cāng)庫(kù)的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-09-09
解決修復(fù)報(bào)錯(cuò)Error in render:TypeError:Cannot read&n
這篇文章主要介紹了解決修復(fù)報(bào)錯(cuò)Error in render:TypeError:Cannot read properties of undefined(reading ‘ipconfig‘)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
本篇文章主要介紹了簡(jiǎn)單理解Vue中的nextTick方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-01-01
這篇文章主要介紹了vue3中Hook使用以及Hook結(jié)合自定義指令方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
vue3中使用reactive定義的變量響應(yīng)式丟失問題解決方案
這篇文章主要介紹了vue3中使用reactive定義的變量響應(yīng)式丟失問題的具體例子和解決方案,文章通過代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06
vue3項(xiàng)目如何使用樣式穿透修改elementUI默認(rèn)樣式
這篇文章主要介紹了vue3項(xiàng)目使用樣式穿透修改elementUI默認(rèn)樣式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
組件又分為非單文件組件和單文件組件，一般常用的就是單文件組件，這篇文章主要介紹了vue組件非單文件組件的使用步驟,需要的朋友可以參考下2023-01-01
Vue Element UI + OSS實(shí)現(xiàn)上傳文件功能
這篇文章主要為大家詳細(xì)介紹了Vue Element UI + OSS實(shí)現(xiàn)上傳文件功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
vue-router跳轉(zhuǎn)時(shí)打開新頁(yè)面的兩種方法
這篇文章主要給大家介紹了關(guān)于vue-router跳轉(zhuǎn)時(shí)打開新頁(yè)面的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue-router具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07