Vue 中 watch 监听的对象变化后前后值一样及解决方案

1.场景:项目中的需求是根据基金代码的变化去获取基金对应的信息还处理一些业务逻辑,watch ,但是如下图所示,在监听函数中的新值和旧值是一样的 所以没有按需走相关代码逻辑,是否跟引用数据类型的指向有关?

 2.问题:

对于引用类型,赋值指向是地址,地址指向堆区存储的值,所以新旧值一样,换句话说就是指向堆的同一个空间,拷贝的是地址,值也是跟着变的,一旦改变拷贝对象中某个变量的值 原始对象也会被改变;(可以了解下深浅拷贝的区别)参考掘金,记录如下

3.解决方案

①,如果我们不需要做复杂逻辑的时候,可以只监听你要观察的属性值变化,如下

②,可以利用深拷贝,会创建出一个新的地址指向新的空间 属性发生改变时 跟原始对象值互不干扰(这里运用了computed 计算属性的暂缓特性来赋值)

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值