vue3中reactive数据被重新赋值后无法双向绑定,使用reactive包裹数组如何正确赋值?
需求:将接口请求到的列表数据赋值给响应数据arr
const arr = reactive([]); const load = () => { const res = [2, 3, 4, 5]; //假设请求接口返回的数据 // 方法1 失败,直接赋值丢失了响应性 // arr = res; // 方法2 这样也是失败 // arr.concat(res); // 方法3 可以,但是很麻烦 res.forEach(e => { arr.push(e); }); };
vue3使用proxy,对于对象和数组都不能直接整个赋值。
使用方法1能理解,直接赋值给用reactive包裹的对象也不能这么做。
这是因为reactive数据被重新赋值后,原来数据的代理函数和最新的代理函数不是同一个,无法被触发
推荐第一种!
引自:
https://segmentfault.com/q/1010000038701322;
https://gudujian.blog.csdn.net/article/details/121961031