import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Component.onCompleted: {
        console.log("win")
    }

    Rectangle{
        width: 30
        height: 30
        color: "green"
        Component.onCompleted: {
            console.log("rec 1")
        }
    }

    Rectangle{
        width: 20
        height: 20
        color: "red"
        Component.onCompleted: {
            console.log("rec 2")
        }
    }
}

qml: win
qml: rec 2
qml: rec 1

从外而内，从下而上

qml组件是树状结构，因此对于上述代码中，组件的结构为：

注意，子节点从左往右是按照代码的从上向下排列的，即处于代码下面的组件先被创建出来。另外，组件展示层级是由上而下的，即写在代码后面的组件被展示在顶部图层，即先创建的占据顶部图层。

而整个创建流程可以看做是  " 树的前序遍历 " 。