神奇的 v-for
神奇的v-for:
在一次项目中,我发现如果使用 v-for 处理与服务器交互的异步任务的时候会有神奇的效果。
如果你写了一个项目,使用 Vue-vuex 组件的时候进行存储数据,使用 action 中的动作向服务器发数据,然后使用 vuex 的 mapState 方法进行获取数据,在这时,我们分析一下数据情况:
第一轮,mounted()函数中调dispatch执行响应的action,在网页中肯定没有获取到数据,但在mounted()之前,第一轮的布局已经完成,这时 v-for 的元素因为遍历值为undefined所以不会生成元素,
第二轮:已经获取到数据,Vue进行更新模板,这是其他经过比对发现没变,不更新,但是到了 v-for 的元素这里,因为数据已经发生了改变这时就可以生成相应的元素了
这个时候重要的事情发生了,由于这个元素是第二轮才生成出来,如果这个元素是组件呢?那么就是这个组件会在第二轮(也就是服务器获取到数据的下一轮)才生成,使用 v-for 属性的组件的 mounted 函数在这时(获取到服务器数据的时候)才调用,那么就可以解决很多烦人的异步问题了,与服务器数据进行交互的组件真的很烦人,虽然使用 nextTick() hock函数也可以解决问题
结论:使用 v-for 属性的组件元素可以在获取完服务器数据的时候在生成组件
