有一段时间没发布新的文章了,因为最近这几个月太忙了。几个项目压在身上,完成一个立刻又到另一个项目去了。 今天就来分享一下vue3使用reactive的一些技巧,都是前段时间公司项目使用vue3的时候发现的一些问题,由于我也是第一次使用vue3,所以接下来讲的内容可能更偏向刚接触vue3的人。顺便也记录一下,看看自己一路走来遇到的问题
reactive基本使用
vue2如果声明了一个对象,但是又想给他新增属性的话,需要使用$set给他重新定义,这是因为vue2的响应式是通过Object.defineProperty来使用的,至于细节方面就不讲了。 vue3的话是使用了proxy来做响应式,即使给声明了的对象新增属性,这个属性也会是响应式的,因为proxy是自己递归去代理的。
reactive赋值的问题
如果此时数据是从接口那拿过来的,如果直接赋值的话是没有效果的,如下:
我们这里使用定时器来模拟接口请求,我们可以看到定时器已经结束了,给了student赋值,但是界面并没有改变,这是因为写法有问题,此时可以通过以下两种方式来实现
方式一
我们可以通过循环数据,找到自己的key给他赋值
方式二
给数据再包一层对象,因为我们前面说个,proxy会递归给数据进行代理