vue监听对象和数组问题只生效一次问题原因

68 阅读1分钟

事情的还是发生在一个即将快乐下班的周五,在距离下班不到半个小时的时候,产品反馈了一个问题给我:说某个页面的汇总表格跳转明细页面的时候,出现了同一行跳转的但是页面值并未刷新的情况,让我赶快去看一眼。于是我立刻打开了项目,期望可以在下班之前解决掉。

这个页面其实就是一个表格里面的数值跳转,由当前的汇总页面带参数跳转到明细页面。

308c1bc1-9f16-46e0-9b08-6db4a71ce9c1.jpeg

打开控制台看了一下,确实同一行表格值只有第一次监听的生效,看了一下代码

1b33a9e5-961f-44ac-a580-7fffd7bbe9d9.jpeg

e1838129-73d4-4aaf-982d-030a9a46509e.jpeg

e1b2753c-ad08-48a4-8233-112f1213cf9b.jpeg

从代码中可以看出,明细监听的是一个传递过来的对象,但是由于对象是引用类型,地址存储在堆中,改变对象的值,并不能改变对象的真实地址,所以,同一行数据跳转的时候,不能触发监听,页面数据并未查询更新。

解决方法其实很简单,每次传入的值改变为新值就好了,使用扩展运算符复制一个新对象,这样就能触发每次的监听啦!

img_v3_02eg_8333f6bd-e16b-439a-8ad4-259904d62f2g.jpg

由于数据和对象都是引用类型,所以监听数组也可能会出现同样的问题,监听的时候注意一下就好了。主要是这次可以快乐的按时下班啦!又是一个快乐的周五!