Vue的加载顺序探讨(一)
在Vuejs 1.0版本中,如果父子组件进行配合,它们的生命周期执行具有如下特点:1. created总是先父后子生命周期函数created总是按照从父到子的顺序依次执行,但是兄弟之间没有严格按照这样的顺序执行,估计是采用了异步函数,不仅如此,子组件在父组件中的插入顺序也是随机的,并没有什么特别的规律。假定子组件的引用顺序如下
·
在Vuejs 1.0版本中,如果父子组件进行配合,它们的生命周期执行具有如下特点:
1. created总是先父后子
生命周期函数created总是按照从父到子的顺序依次执行,但是兄弟之间没有严格按照这样的顺序执行,估计是采用了异步函数,不仅如此,子组件在父组件中的插入顺序也是随机的,并没有什么特别的规律。假定子组件的引用顺序如下:
<div class="container">
<child-c1 v-ref:child1></child-c1>
<child-c2 v-ref:child2></child-c2>
</div>
如果采用$children引用来获取所有的子组件,那么”child-c1”并不总是处于第一个位置,如下:
// 大多数时候判断会失败
if(this.$children[0] === this.$refs.child1) {
// 这里的代码很可能得不到执行机会
}
2. ready的顺序更混乱
按照我的估计,父子组件的ready顺序应该是先子后父,这样才能保证组件完全加载完成,但从实践的实例来看,ready完全没有顺序,有时候是父组件先加载完成,也有时候是子组件先加载完成,所以在编程实践中,绝对不可以依赖他们的加载顺序。
3. 结论
在实践中,如果需要保障组件依次加载完成,绝对不可以依赖组件的生命顺序,也不能依赖父子组件的ready生命周期。
更多推荐
已为社区贡献7条内容
所有评论(0)