最近写练习项目的时候,用到了echart,官方推荐的是在mounted下进行表格配置,然而很多时候数据都是来源于异步ajax,问题来了,在这里尝试使用create下获取的异步的data数据,结果报错说undefined,这里提前在data下声明过变量名,哪怕在定义created时声明了async使用await阻塞,依旧无法获取。
查询之后发现说这个东西是,vue生命周期函数之间不会被阻塞,后一个生命周期不一定会等前一个完全执行完再执行,目前在csdn下搜到的解决方案主要有
1、在mounted下使用定时器设置异步任务,但是这个缺点很明显,因为这个时间不好掌握,异步请求时间太长还是会报undefined,太短就浪费了时间
2、在watch下监听请求的数据,一旦发现请求到之后再进行操作,这个方法我觉得很奇怪,created的时候监听器感觉为时过早,不适合使用,但是实际使用确实不会有什么大的问题除非监听器还要做别的事情,那这样怎么分配两个任务,条件判断可能又会麻烦
这里提出来另一种方法,$emit方法,vue2的兄弟组件共享数据和子向父传值的一个方案,不过这里不是用bus.$emit,而是直接使用组件自己的$emit,$emit主要是用来触发事件,在mounted下$on监听自己的这个事件,代码例如这张图
若我们以伪代码的形式去操作,可以写成这样
// 伪代码形式
async created(){
let a = await ajaxOperate
this.a = a
...
//ajaxOver
this.$emit('requestOver')
//或者可以
this.$emit('requestOver',a)
},
async mounted(){
console.log(this.a);//undefined
this.$on('requestOver',()=>{
console.log(this.a);//得到正确数据
operate()
})
// 或者
this.$on('requestOver',(a)=>{
console.log(a);//得到正确数据
operate()
})
}
在created下进程会被await阻塞,异步进程完成以后会再在这里触发事件,那么直接在mounted下监听这个事件就可以直接使用获取到的异步数据了,相比于watch的优点也很明显,至少不会影响watch的正常使用,毕竟watch的设计不是用来做这个的,其次就是不用担心方案1的时间控制问题,让组件自己触发,办法至少应该是比现有两种方案好一些的,不知道这个办法算不算猴头第一次被提出啊啊啊我好激动了。
(楼主是湖南某本科学校心理学的学生,对于编程的学习纯属感兴趣,学过爬虫,写这篇文章的时候刚学完vue2,准备做完一个自己的全栈项目之后再学习vue3,因为学习过的东西有限,自己非科班出生,见解可能有些狭隘,如果有不对的地方欢迎批评指正,友好交流,一起进步😉)