Vue - App.vue

vue-cli脚手架搭建的项目，在main.js引入App.vue，App.vue作为最顶层的组件，也具有自己的生命周期函数，其主要的功能是嵌套子组件

页面加载时，从视图的最顶层组件到最底层组件依次创建（created），再从最底层组件到最顶层组件以此挂载（mounted）

// App.vue，其中嵌套v-header与v-tab子组件

<template>
  <div id="app">
    <v-header></v-header>
    <v-tab></v-tab>
  </div>
</template>

<script>
  import header from 'components/header/header'
  import tab from 'components/tab/tab'
    
  export default {
    name: 'App',
    components: {
      'v-header': header,
      'v-tab': tab
    },
    created () {
      console.log('Cp-created-App')
    },
    mounted() {
      console.log('Cp-mounted-App')
    }
  }
</script>

// tab.vue，包含多个命名视图

<template>
  <div>
    <div class="tab border-1px">
      <router-link to="/goods" exact tag="a" class="tab-item">商品</router-link>
      <router-link to="/ratings" tag="a" class="tab-item">评论</router-link>
      <router-link to="/seller" tag="a" class="tab-item">商家</router-link>
    </div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  created() {
    console.log("Cp-created-tab");
  },
  mounted() {
    console.log("Cp-mounted-tab");
  }
};
</script>

在视图显示组件的生命周期created()与mounted()阶段分别打印信息，结果如下

Cp-created-App
Cp-created-header
Cp-created-tab
Cp-created-goods
Cp-mounted-header
Cp-mounted-goods
Cp-mounted-tab
Cp-mounted-App