vue3專案中陣列變化的更新問題

1. 用reactive建立了一個響應式陣列，但頁面為發生更新

import { ref, watch } from 'vue'
let myText = ref('');
let list = reactive(['aaa', 'aab', 'bbb', 'ccc', 'add', 'bdd', 'ddd']);
let yuanList = ['aaa', 'aab', 'bbb', 'ccc', 'add', 'bdd', 'ddd'];
watch(myText, (newVal, oldVal)=> {
    list = yuanList.filter(item => item.includes(myText.value));
})
 

• 揭開謎底
  • 頁面未更新是因為改變的是變數，而不是return出去的物件資料。
  • vue監聽的是return出去的物件，如果重新賦值的話 該變數會指向另外一塊記憶體空間，導致之前暴露出去的那塊空間一直監測不到，所以頁面一直不會更新。
  • 你可以先定義一個變數 例如：let xxx = reactive({menuList: [xx,xx,xx]});通過更改xxx.menuList 來更改，這樣Vue就能感知到了。

2. 用ref建立響應式陣列，則無法使用陣列的方法如map、filter等

• ref是可以使用陣列的方法的，ref包裝了一層，實際需要用.value形式訪問資料。即list.value，value才是指向真實的資料

• let list = ref([1, 3, 5, 7, 9])
  list.value.forEach(item => console.log(item)) // 正確方式
  list.forEach(item => console.log(item)) // 錯誤方式