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