vue使用computed有参数_Vue computed参数与各生命周期关系(主要是异步的时候)

本文探讨了Vue中computed属性在不同生命周期阶段的执行情况,特别是涉及异步操作时的问题。当在computed中进行异步操作,如ajax请求,由于computed在beforeCreate阶段已经执行,此时可能导致数据未定义,引发错误。解决方案是将数据存储在data中,通过方法获取并在watch中监听变化。注意,computed属性的结果被缓存,不能直接修改,只能影响其依赖的data属性。
摘要由CSDN通过智能技术生成

前面聊了vue生命周期与路由的先后顺序,现在聊聊computed与各生命周期。先聊一下需求背景,我在做一个图表的时候遇到了,我将图表样式封装为一个组件,然后各个地方需要的时候将数据通过props传入到组件自动画图。因为我这个数据会变化,我的方法里面又有比较多的方法了,就像弄到计算属性里面去,这样在data里面也可以少定义一个属性,然后问题就来了。我在子组件里面读取的props竟然是未定义!!这个问题留到后面解释。

上次我们知道了父组件子组件生命周期的关系,同理我在computed当中定义了一个属性

computed:{

test:function(){return '我是test'}

}

然后我在父组件和子组件生命周期当中都打印出来了。当然我们的computed肯定是有一定的逻辑代码才对的,所以我有写下了这样的测试

data:{

a:23,

b:32},

computed:{

test(){return this.a+this.b;

}

}

结果与上面一致,那么说明computed的属性是在created之前就已经执行了。

好这个时候回到我们的问题,我在computed里面定义的为什么在子组件props里面未定义呢。

基于上面的结论我在父级打印我的test发现未定义,那么这个时候子组件的未定义就可以理解了。先贴上我的代码吧

computed:{

test(){this.ajax.get('url').then((res)=>{returnres.data;

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值