一、Vue2篇

1. 关于生命周期

1.1 生命周期有哪些？请求在created还是mounted？

​ vue2.x系统自带的生命周期有8个

beforeCreate 
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

1.1.1 进入组件会执行哪些生命周期？

    beforeCreate 
    created
    beforeMount
    mounted

1.1.2 进入父组件会执行哪些生命周期？

beforeCreate
created
beforeMount
beforeCreate
created
beforeMount
beforeDestroy
destroyed 
mounted
mounted

示例图片如下（点击父组件触发的生命周期）

1.1.3 进入子组件会执行哪些生命周期？

示例图片如下（点击子组件触发的生命周期）

1.1.3 子组件进入父组件会执行哪些生命周期？

示例图片如下（点击子组件进入父组件触发的生命周期）

!整体的代码如下

App.vue

    <template>
     <div id="app">
        <nav>
        <router-link to="/">首页</router-link>
        <br>
            <router-link to="/parent">父组件</router-link>
            <br>
            <router-link to="/sun">子组件</router-link>
        </nav>
        <router-view/>
      </div>
    </template>

    <script>

    export default {
      name: 'App',
    }
    </script>

    <style>
    #app {
      font-family: Avenir, Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

---

lifecycle.vue

<template>
  <div class="home" id='home' ref='child'>

  </div>
</template>

<script>
export default {
    name: 'LifeCycle',
    beforeCreate() {
        console.log('顶级组件生命周期==========》beforeCreate')
    },
    created() {
        console.log('顶级组件生命周期==========》created')
    },
    beforeMount() {
        console.log('顶级组件生命周期==========》beforeMount')
    },
    mounted() {
        console.log('顶级组件生命周期==========》mounted')
    },
    beforeUpdate() {
        console.log('顶级组件生命周期==========》beforeUpdate')
    },
    updated() {
        console.log('顶级组件生命周期==========》updated')
    },
    beforeDestroy() {
        console.log('顶级组件生命周期==========》beforeDestroy')
    },
    destroyed() {
        console.log('顶级组件生命周期==========》destroyed ')
    },
}
</script>

Parent.vue

    <template>
    <div>
        父组件
        <componentSun></componentSun>
    </div>
</template>

<script>
import componentSun from "./sun.vue";
export default {
    name: 'component-parent',
    components:{
componentSun
    },
    beforeCreate() {
        console.log("父组件生命周期==========》beforeCreate");
    },
    created() {
        console.log("父组件生命周期==========》created");
    },
    beforeMount() {
        console.log("父组件生命周期==========》beforeMount");
    },
    mounted() {
        console.log("父组件生命周期==========》mounted");
    },
    beforeUpdate() {
        console.log("父组件生命周期==========》beforeUpdate");
    },
    updated() {
        console.log("父组件生命周期==========》updated");
    },
    beforeDestroy() {
        console.log("父组件生命周期==========》beforeDestroy");
    },
    destroyed() {
        console.log("父组件生命周期==========》destroyed ");
    },
};
</script>

sun.vue

<template>
	<div>子组件生命周期</div>
</template>



<script>
export default {
    name: 'component-sun',
    components:{

    },
    beforeCreate() {
        console.log('子组件生命周期==========》beforeCreate')
    },
    created() {
        console.log('子组件生命周期==========》created')
    },
    beforeMount() {
        console.log('子组件生命周期==========》beforeMount')
    },
    mounted() {
        console.log('子组件生命周期==========》mounted')
    },
    beforeUpdate() {
        console.log('子组件生命周期==========》beforeUpdate')
    },
    updated() {
        console.log('子组件生命周期==========》updated')
    },
    beforeDestroy() {
        console.log('子组件生命周期==========》beforeDestroy')
    },
    destroyed() {
        console.log('子组件生命周期==========》destroyed ')
    },
}
</script>

此实例配置的router.js如下 router.js

import Vue from 'vue'

import VueRouter from 'vue-router'

import LifeCycle from '../views/lifecycle.vue'

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'home',
    component: LifeCycle
  },

  {
    path: '/parent',
    name: 'component-parent',
    component: () => import('../views/parent.vue')
  },
  {
    path: '/sun',
    name: 'component-sun',
    component: () => import('../views/sun.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router