发现宝藏

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。【宝藏入口】。

---

在 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()）或通过合适的原生数组方法来修改数组。