Vue - App.vue_vue的app.vue怎么写-优快云博客

本文链接：https://blog.youkuaiyun.com/sinat_33184880/article/details/103439629

本文探讨Vue项目中App.vue作为顶级组件的角色，以及它如何承载子组件如v-header和v-tab。在页面加载过程中，组件从顶层到底层依次进行created和mounted生命周期。在这些阶段，组件的生命周期函数被调用，展示了Vue组件的渲染流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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