Vue的加载顺序探讨

原文地址：http://blog.csdn.net/yiifaa/article/details/53393479

在Vuejs 1.0版本中，如果父子组件进行配合，它们的生命周期执行具有如下特点：

1. created总是先父后子

生命周期函数created总是按照从父到子的顺序依次执行，但是兄弟之间没有严格按照这样的顺序执行，估计是采用了异步函数，不仅如此，子组件在父组件中的插入顺序也是随机的，并没有什么特别的规律。假定子组件的引用顺序如下：

<div class="container">
    <child-c1 v-ref:child1></child-c1>
    <child-c2 v-ref:child2></child-c2>
</div>
 
 
1
2
3
4
 
 
1
2
3
4

如果采用$children引用来获取所有的子组件，那么”child-c1”并不总是处于第一个位置，如下：

    //  大多数时候判断会失败
    if(this.$children[0] === this.$refs.child1) {
        //  这里的代码很可能得不到执行机会
    }
 
 
1
2
3
4
 
 
1
2
3
4

2. ready的顺序更混乱

按照我的估计，父子组件的ready顺序应该是先子后父，这样才能保证组件完全加载完成，但从实践的实例来看，ready完全没有顺序，有时候是父组件先加载完成，也有时候是子组件先加载完成，所以在编程实践中，绝对不可以依赖他们的加载顺序。

3. 结论

在实践中，如果需要保障组件依次加载完成，绝对不可以依赖组件的生命顺序，也不能依赖父子组件的ready生命周期。