场景原因
我们需要在vue3中使用服务器的数据渲染到页面上,我使用的是reactive生成的响应式数据属性,但是在挂载后请求的数据并没有渲染显示到页面上。
技术:
vue3、element-ui-plus
一、例子
home.vue
{{ item.authName }}
{{ item2.authName }}

我们通过直接赋值,可以看出数据变为普通的数据了,并不是响应式的。
二、解决方法
1、使用ref存储响应式数据
代码如下:
立即学习“前端免费学习笔记(深入)”;

可以看出打印出的数据是经过ref劫持的数据,是响应式的。
2、在reactive中使用对象包裹要改变的数据
代码如下:
立即学习“前端免费学习笔记(深入)”;

使用这种方式,数据也是响应式的。
3、for of循环push到reactive数据中,不破坏数据结构
代码如下:
立即学习“前端免费学习笔记(深入)”;











