vue3使用reactive的使用

3,224 阅读1分钟

有一段时间没发布新的文章了,因为最近这几个月太忙了。几个项目压在身上,完成一个立刻又到另一个项目去了。 今天就来分享一下vue3使用reactive的一些技巧,都是前段时间公司项目使用vue3的时候发现的一些问题,由于我也是第一次使用vue3,所以接下来讲的内容可能更偏向刚接触vue3的人。顺便也记录一下,看看自己一路走来遇到的问题

reactive基本使用

vue2如果声明了一个对象,但是又想给他新增属性的话,需要使用$set给他重新定义,这是因为vue2的响应式是通过Object.defineProperty来使用的,至于细节方面就不讲了。 vue3的话是使用了proxy来做响应式,即使给声明了的对象新增属性,这个属性也会是响应式的,因为proxy是自己递归去代理的。

image.png

image.png

reactive赋值的问题

如果此时数据是从接口那拿过来的,如果直接赋值的话是没有效果的,如下:

image.png

image.png 我们这里使用定时器来模拟接口请求,我们可以看到定时器已经结束了,给了student赋值,但是界面并没有改变,这是因为写法有问题,此时可以通过以下两种方式来实现

方式一

我们可以通过循环数据,找到自己的key给他赋值 image.png

image.png

方式二

给数据再包一层对象,因为我们前面说个,proxy会递归给数据进行代理 image.png

image.png