vue3项目中数组变化的更新问题

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)) // 错误方式