一个由父子组件传值和$nextTick引发的关于宏任务和微任务的思考
这一切要从最近接手了一段祖传的代码开始说起。。。
起因和解决方式 作为一名前端老司机(自封),也不知道是不是招我进来的老哥看上了我的项目经历还是老板的无意为之(年底都是老项目优化),总而言之我接手了一段老的n手(n>3)代码,虽然提交时间是一年前,但是这ES5语法仿佛是15-17年的产物,让我回想到我刚工作的时候接触的网页,有种亲切的感觉(不是)。
在一顿梳理之后,我把问题的目标锁定在了一对父子组件上,子组件内有两个函数:
- 根据watch监听的函数,在父组件上用data控制组件展示的同时,我们要在这里做一个localStorage.setItem和赋值子组件data的操作,在每次打开时传入当前定位城市。
- 一个需要localStorage.getItem获取数据然后做请求与后端交互的函数,原有逻辑会在父组件上通过ref去调用,为了逻辑分离和避免重复调用,不把(2)加入到(1)的逻辑里
父组件调用:
this.isshowseach = true;
this.$refs.seachadrFuc.mapData(localStorage.getItem("currentCity"));
子组件watch和methods:
watch: {
showOnoff: {
handler(val) {
console.log("showOnoff触发");
// 默认把当前定位的城市填入
this.selectCity = this.city;
localStorage.setItem("selectCity", this.selectCity);
}
},
},
},
methods: {
mapData(val) {
console.log("mapData触发");
this.$nextTick(() => {
this.getupList();
});
},getupList() {
console.log(this.selectCity) //成功赋值为this.city
}}
![一个由父子组件传值和$nextTick引发的关于宏任务和微任务的思考](https://img.it610.com/image/info9/e8f6b03796764ebabf3d9ec2c96f47fb.png)
文章图片
分析: 【一个由父子组件传值和$nextTick引发的关于宏任务和微任务的思考】watch这里使用的Object.observe(proxy同理)监听,属于微任务,所以会比同步任务window.localStorage.getItem后执行。
$nextTick的原理是Promise.then、MutationObserver和 setImmediate又或者是setTimeout(fn,0),都属于宏任务,因此window.localStorage.getItem和赋值子组件data包裹上宏任务$nextTick后,又会比watch后执行。
谢谢观看!
推荐阅读
- 一个人的旅行,三亚
- 一个小故事,我的思考。
- 一个人的碎碎念
- 七年之痒之后
- 我从来不做坏事
- 由浅入深理解AOP
- 异地恋中,逐渐适应一个人到底意味着什么()
- 迷失的世界(二十七)
- live|live to inspire 一个普通上班族的流水账0723
- 遗憾是生活的常态,但孝顺这件事,我希望每一个人都不留遗憾