vue數組更新方法詳解
本文主要介紹了VUE 陣列更新問題，文中給大家介紹了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>
<p id="app">
<ul>
<template v-for="book in books">
<li>书名：{{book.name}}</li>
<li>作者：{{book.author}}</li>
</template>
</ul>
</p>
<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>
<p id="app">
<ul>
<template v-for="book in filterBooks">
<li>书名：{{book.name}}</li>
<li>作者：{{book.author}}</li>
</template>
</ul>
</p>
<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 方法的別名，
以上是vue數組更新方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何使用 foreach 迴圈移除 PHP 陣列中的重複元素？
Apr 27, 2024 am 11:33 AM
使用foreach循環移除PHP數組中重複元素的方法如下：遍歷數組，若元素已存在且當前位置不是第一個出現的位置，則刪除它。舉例而言，若資料庫查詢結果有重複記錄，可使用此方法移除，得到不含重複記錄的結果。
PHP數組深度複製的藝術：使用不同方法完美複製
May 01, 2024 pm 12:30 PM
PHP中深度複製數組的方法包括：使用json_decode和json_encode進行JSON編碼和解碼。使用array_map和clone進行深度複製鍵和值的副本。使用serialize和unserialize進行序列化和反序列化。
PHP 陣列鍵值翻轉：不同方法的效能比較分析
May 03, 2024 pm 09:03 PM
PHP數組鍵值翻轉方法效能比較顯示：array_flip()函數在大型數組（超過100萬個元素）下比for迴圈效能更優，耗時更短。手動翻轉鍵值的for迴圈方法耗時相對較長。
PHP 數組分組函數在資料整理的應用
May 04, 2024 pm 01:03 PM
PHP的array_group_by函數可依鍵或閉包函數將陣列中的元素分組，傳回關聯數組，其中鍵為組名，值是屬於該組的元素數組。
深度複製PHP數組的最佳實踐：探索高效的方法
Apr 30, 2024 pm 03:42 PM
在PHP中執行陣列深度複製的最佳實踐是：使用json_decode(json_encode($arr))將陣列轉換為JSON字串，然後再轉換回陣列。使用unserialize(serialize($arr))將陣列序列化為字串，然後將其反序列化為新陣列。使用RecursiveIteratorIterator迭代器對多維數組進行遞歸遍歷。
PHP數組多維排序實戰：從簡單到複雜場景
Apr 29, 2024 pm 09:12 PM
多維數組排序可分為單列排序和嵌套排序。單列排序可使用array_multisort()函數依列排序；巢狀排序需要遞歸函數遍歷陣列並排序。實戰案例包括按產品名稱排序和按銷售量和價格複合排序。
PHP 數組合併去重演算法：平行的解決方案
Apr 18, 2024 pm 02:30 PM
PHP數組合併去重演算法提供了平行的解決方案，將原始陣列分成小塊並行處理，主進程合併區塊的結果去重。演算法步驟：分割原始數組為均等分配的小塊。並行處理每個區塊去重。合併區塊結果並再次去重。
PHP 陣列分組函數在尋找重複元素中的作用
May 05, 2024 am 09:21 AM
PHP的array_group()函數可用來按指定鍵對陣列進行分組，以尋找重複元素。函數透過以下步驟運作：使用key_callback指定分組鍵。可選地使用value_callback確定分組值。對分組元素進行計數並識別重複項。因此，array_group()函數對於尋找和處理重複元素非常有用。
