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)) // 错误方式
本文作者:HuangBingQuan
本文链接:https://www.cnblogs.com/bingquan1/p/16311157.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步