發現寶藏

前些天發現了一個巨牛的人工智能學習網站，通俗易懂，風趣幽默，忍不住分享一下給大家。【寶藏入口】。

---

在 Vue 中，數組的變化是通過 響應式 系統來監聽的。Vue 使用 getter 和 setter 來追蹤數組的變化，并在數據變化時更新視圖。然而，由于 JavaScript 的原生數組方法和 Vue 的響應式系統之間的差異，并不是所有的數組方法都會觸發視圖更新。以下是 Vue 中數組方法的觸發情況：

觸發 Vue 監聽的數組方法

1. push()

   • arr.push(item)：將一個或多個元素添加到數組的末尾，會觸發視圖更新。

   arr.push(1); // 會觸發視圖更新
   

2. pop()

   • arr.pop()：移除數組的最后一個元素，并返回該元素，觸發視圖更新。

   arr.pop(); // 會觸發視圖更新
   

3. shift()

   • arr.shift()：移除數組的第一個元素，觸發視圖更新。

   arr.shift(); // 會觸發視圖更新
   

4. unshift()

   • arr.unshift(item)：向數組的開頭添加一個或多個元素，觸發視圖更新。

   arr.unshift(1); // 會觸發視圖更新
   

5. splice()

   • arr.splice(index, count, item)：通過索引修改數組（添加、刪除或替換元素），會觸發視圖更新。

   arr.splice(1, 1, 2); // 會觸發視圖更新
   

6. sort()

   • arr.sort()：排序數組，觸發視圖更新。

   arr.sort(); // 會觸發視圖更新
   

7. reverse()

   • arr.reverse()：反轉數組，觸發視圖更新。

   arr.reverse(); // 會觸發視圖更新
   

8. $set() (Vue 特有)

   • this.$set(arr, index, value)：用于直接修改數組中的指定索引值。該方法會觸發視圖更新。

   this.$set(arr, 1, 'newValue'); // 會觸發視圖更新
   

9. $delete() (Vue 特有)

   • this.$delete(arr, index)：刪除數組中的指定項，觸發視圖更新。

   this.$delete(arr, 1); // 會觸發視圖更新
   

不會觸發 Vue 監聽的數組方法

1. 賦值操作

   • 直接通過索引修改數組的元素，例如：arr[index] = value。這種操作不會觸發 Vue 的響應式系統，視圖不會自動更新。

   arr[0] = 'newValue'; // 不會觸發視圖更新
   

2. concat()

   • arr.concat()：這個方法返回一個新數組，原數組沒有改變，Vue 不會檢測這個操作。

   arr = arr.concat([1, 2, 3]); // 不會觸發視圖更新
   

3. slice()

   • arr.slice()：該方法返回一個新數組，原數組沒有改變，Vue 也不會追蹤此操作。

   let newArr = arr.slice(); // 不會觸發視圖更新
   

4. indexOf()

   • arr.indexOf(item)：查找元素在數組中的索引位置，不會修改數組，不會觸發視圖更新。

   arr.indexOf(1); // 不會觸發視圖更新
   

5. forEach()

   • arr.forEach(callback)：它遍歷數組，但不會修改數組，也不會觸發視圖更新。

   arr.forEach(item => console.log(item)); // 不會觸發視圖更新
   

6. map()

   • arr.map(callback)：返回一個新數組，原數組沒有變化，因此不會觸發視圖更新。

   let newArr = arr.map(item => item * 2); // 不會觸發視圖更新
   

7. filter()

   • arr.filter(callback)：返回一個新數組，原數組沒有變化，不會觸發視圖更新。

   let newArr = arr.filter(item => item > 5); // 不會觸發視圖更新
   

結論

Vue 對數組的變更監聽依賴于其響應式系統。某些數組方法（如 push(), pop(), shift(), unshift(), splice() 等）會觸發視圖更新，因為它們直接改變了數組的內容。其他方法（如 concat(), slice(), indexOf(), map() 等）返回的是新數組或僅進行遍歷，它們不會直接影響原數組，因此 Vue 不會檢測到變化，從而不會觸發視圖更新。

為了確保數組變更能正確觸發視圖更新，盡量使用 Vue 提供的響應式方法（如 this.$set() 和 this.$delete()）或通過合適的原生數組方法來修改數組。