Vue3 Reactive數組的詳細闡述

一、響應式對象和響應式數組

在Vue3中，響應式對象和響應式數組都是採用函數式API解決了數據的響應式問題。Vue3的reactive()函數可以對對象進行響應式化處理，而reactive()函數內部會判斷傳入的對象是否為數組類型，如果是，則會調用ref()函數將數組轉換為響應式數組，這樣在數組對象進行增加、修改、刪除操作後，即可自動觸發DOM的更新。

  import { reactive } from 'vue'
  const state = reactive({
    arr: [1, 2, 3],
    obj: {
      name: 'Jack',
      age: '18'
    }
  })

上述代碼中的state.arr數組使用了Vue3的reactive()函數進行響應式化處理，接下來可以在Vue組件中進行引用，即可達到監聽狀態改變的目的。

二、響應式數組的常用API

1、push()方法

通過調用數組的push()方法，在末尾添加一個或多個元素，並返回新的數組長度。這時候，因為是使用了Vue3的響應式數組，DOM會自動更新。

  state.arr.push(4)
  // state.arr變成[1, 2, 3, 4]

2、pop()方法

在數組末尾移除最後一個元素，並返回該元素。同樣，因為使用了響應式數組，DOM會自動更新。

  state.arr.pop()
  // state.arr變成[1, 2]

3、shift()方法

在數組開頭移除第一個元素，並返回該元素。同樣，因為使用了響應式數組，DOM會自動更新。

  state.arr.shift()
  // state.arr變成[2, 3]

4、unshift()方法

在數組開頭添加一個或多個元素，並返回新的數組長度。同樣，因為使用了響應式數組，DOM會自動更新。

  state.arr.unshift(0)
  // state.arr變成[0, 1, 2, 3]

5、splice()方法

在指定位置刪除多少個元素並添加新的元素。同樣，因為使用了響應式數組，DOM會自動更新。

  state.arr.splice(1, 2, 5, 6)
  // state.arr變成[1, 5, 6]

6、slice()方法

返回一個新數組，包含從開始到結束（不包括結束）的所有元素。slice()方法不會更改原始數組，只是返回一個新的數組，需要注意的是，slice()方法的第一個參數是開始的索引，第二個參數是結束的索引。同樣，因為使用了響應式數組，DOM會自動更新。

  const newArr = state.arr.slice(1, 2)
  // newArr是[2]，state.arr還是[1, 2, 3]

三、響應式數組的高級操作

1、computed屬性

computed屬性可以將一個普通的屬性值轉換成一個計算屬性，只要依賴的數據發生變化，它就會自動更新。此外，computed屬性返回的值要麼是基本類型的值，要麼是一個響應式對象或者數組。在本例中，通過computed屬性獲取響應式數組的長度，只要數組發生變化，computed屬性值就會自動更新。

  import { computed } from 'vue'
  const length = computed(() => state.arr.length)

2、watch()方法

watch()方法可以監聽數組對象中某個屬性的變化，並做出相應的操作，可以為變化的屬性設置一個回調函數。在本例中，當響應式數組發生變化時便會執行該回調函數，並傳遞修改後的數組和修改前的數組。

  watch(
    () => state.arr,
    (newVal, oldVal) => {
      // do something
    }
  )

四、響應式數組的限制

Vue3中的響應式數組雖然操作方便，易於控制，但是仍存在幾個需要注意的點，其中最主要的是：

1、直接更改數組的某一項不會觸發視圖更新

通過索引值直接修改數組中的某一項時，並不能夠觸發視圖的更新，需要手動調用splice()方法來實現更新。這是由於Vue3不能偵測到通過索引值進行修改的操作，需要手動進行觸發。

在Vue2的版本中，使用Vue.set()或者this.$set()的方法可以實現對數組的某一項進行值的更改，但在Vue3中這兩個方法的使用已經被移除，應該使用splice()方法來替代。

2、因為限制更新性能問題，無法觀測數組索引的變化

由於Vue3為了優化性能，不會對數組中的索引進行觀察，因此新增或刪除數組元素時才會觸發視圖更新。如果想要直接更新某一個索引值，需要手動調用splice()方法。

綜上所述，響應式數組操作時需要注意索引直接修改沒有觸發視圖更新、新增刪除元素才能觸發視圖更新等問題，但是這些問題都可以通過手動調用方法進行監控、更新解決，從而達到需要的效果。