Open lmislm opened 1 year ago
Vue生命周期钩子和async 问题描述 在mounted生命周期钩子中无法访问$refs。
原因 我对created添加了async标记，在其中使用了await。
Vue的生命周期钩子是不支持async的，所以在created还在await卡着的时候，mounted会提前到created执行，这时候，因为我的页面中ref元素包含v-if、v-for等依赖于异步数据的指令，还没有加载完成，所以在mounted中显示undefined。
至于为什么不支持async？
不支持，因为整个 diff 和 render 的算法都是基于组件生命周期同步执行的前提下的。而且任意一个组件的生命周期可能异步推迟最后的渲染完成是绝对不应该出现的设计。 ——yyx990803 https://github.com/vuejs/vue/issues/7333
解决方案 首先，将存放有异步方法的代码片段和存放有ref的代码片段放到同一个生命周期中，created / mounted都可以，因为一旦给它们加上async，就会如上所述的完全脱离原来的执行顺序 通过await阻塞异步方法后面的代码片段，等待异步执行结束后再进行ref访问 异步执行完后也不能立马访问ref，这是因为数据和视图不是同步执行的（https://github.com/guapi233/Blog/issues/2），所以需要使用Vue提供的$nextTick将含有ref的代码片段包裹起来，等待本次执行的视图渲染完毕后，就可以调用ref了
来源：https://github.com/guapi233/Blog/issues/32
Vue生命周期钩子和async 问题描述 在mounted生命周期钩子中无法访问$refs。
原因 我对created添加了async标记，在其中使用了await。
Vue的生命周期钩子是不支持async的，所以在created还在await卡着的时候，mounted会提前到created执行，这时候，因为我的页面中ref元素包含v-if、v-for等依赖于异步数据的指令，还没有加载完成，所以在mounted中显示undefined。
至于为什么不支持async？
不支持，因为整个 diff 和 render 的算法都是基于组件生命周期同步执行的前提下的。而且任意一个组件的生命周期可能异步推迟最后的渲染完成是绝对不应该出现的设计。 ——yyx990803 https://github.com/vuejs/vue/issues/7333
解决方案 首先，将存放有异步方法的代码片段和存放有ref的代码片段放到同一个生命周期中，created / mounted都可以，因为一旦给它们加上async，就会如上所述的完全脱离原来的执行顺序 通过await阻塞异步方法后面的代码片段，等待异步执行结束后再进行ref访问 异步执行完后也不能立马访问ref，这是因为数据和视图不是同步执行的（https://github.com/guapi233/Blog/issues/2），所以需要使用Vue提供的$nextTick将含有ref的代码片段包裹起来，等待本次执行的视图渲染完毕后，就可以调用ref了
来源：https://github.com/guapi233/Blog/issues/32