在vue的官网上，有一个很难懂的图，还是英文的········

简单总结一下，方面处理数据和渲染dom

第一个：单独组件的生命周期；

1. beforeCreate：dom和data以及motheds未定义；
2. creaded：dom未定义，data和motheds定义；
3. beforemount：dom和data以及motheds已经定义，但是dom上利用的data和motheds并没有被赋值和渲染；
4. mounted：dom和data以及motheds已经定义，并且已经渲染；
5. beforeUpdate和updated都是在data改变后才执行；
6. actived：这个想必很少用到，这个只有在用到vue的标签<keep-alive>才会触发，方便保存数据，避免第二次进入界面时重复调用接口

说一下<keep-alive>

keep-alive是vue的内部标签，包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们；当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。sas

第二个：Vue中父组件和子组件在一起的生命周期。

创建时：
1.父--beforeCreate

2.父--created

3.父--beforeMounted

4.子--beforeCreate

5.子--created

6.子--beforeMounted

7.子--mounted

8.子--actived（如过有<keep-alive>标签）

9.父--mounted

10.父--actived（如过有<keep-alive>标签）

销毁时：

1.父--beforeDestroy

2.子--beforeDestroy

3.子--destroyed

4.父--destroyed

缓存路由

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。

假设我们有登录，注册两个路由组件。登录组件切换到注册组件，登录组件的生命周期，从进入时的创建到离开时的销毁。当我们页面从注册组件切换回登录组件的时候。登录组件已经被销毁了，之前的数据是不会存在的。这是时候我们可以用keep-alive 来保存数据。

使用方式：在keep-alive里面放入要缓存的组件。

被keep-alive包裹的所有组件，都还不会销毁以及重新渲染。

来验证一下：

App.vue

<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<style lang="scss">


</style>

注册组件：生成一个随机数，点击登录的时候，传递参数。

<template>
    <div>
        <el-card class="box-card" style="margin: 100px auto;text-align: center;width: 430px;">
            <div slot="header" class="clearfix" style="text-align: center;font-weight: bolder;font-size: 20px">
                <span>注册</span>
            </div>
            <el-input
                    prefix-icon="el-icon-user-solid"
                    style="width: 80%;margin-top: 20px"
                    type="text"
                    placeholder="请输入用户名"
                    v-model="userName"
                    show-word-limit
            >
            </el-input>
            <el-input prefix-icon="el-icon-lock" style="margin-top: 20px;width: 80%" placeholder="请输入密码" v-model="pwd" show-password></el-input>
            <el-button style="width: 51%;margin-top: 40px;" type="primary" @click="Regist">注册</el-button>
            <div style="margin-top: 20px">
                <button @click="toLogin">登录</button>
            </div>

        </el-card>
    </div>
</template>

<script>
    export default {
        name: "Regist",
        data(){
            return {
                userName:'',
                pwd:'',
                id:Math.random()
            }
        },
        methods:{
            Regist(){

            },
            toLogin(){
                this.$router.push({
                    path: '/Login',
                    query:{//传参
                        id:this.id
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>

登录组件：

<template>
    <div>
        <el-card class="box-card" style="margin: 100px auto;text-align: center;width: 430px;">
            <div slot="header" class="clearfix" style="text-align: center;font-weight: bolder;font-size: 20px">
                <span>登录</span>
            </div>
            <el-input
                    prefix-icon="el-icon-user-solid"
                    style="width: 80%;margin-top: 20px"
                    type="text"
                    placeholder="请输入用户名"
                    v-model="userName"
                    show-word-limit
            >
            </el-input>
            <el-input prefix-icon="el-icon-lock" style="margin-top: 20px;width: 80%" placeholder="请输入密码" v-model="pwd" show-password></el-input>
            <el-button style="width: 51%;margin-top: 40px;" type="primary" @click="login">登录</el-button>
            <div style="margin-top: 20px">
                <button @click="toRegist">注册</button>
            </div>

        </el-card>
    </div>
</template>

<script>
    export default {
        name:'Login',
        data(){
            return {
                userName:'',
                pwd:'',
            }
        },
        methods:{
            toRegist(){
                this.$router.go(-1)
            },
            login(){
                // localStorage.setItem('token','fdfjkdfjksdfdkf');
                this.$router.push('/index')
            }
        },
        created(){//接收参数，赋值给userName
            this.userName = this.$route.query.id
        },
        beforeDestroy(){
            console.log('我马上被销毁了');
        }
    }
</script>

<style scoped>

</style>

效果图：

第二次切换：

问题来了，这时候我们会发现，第一次和第二次传递过来的随机数是一样的。

原因是注册组件也被缓存起来了，并不会重新执行。所以传的随机数是一样的。

那有什么可以使注册组件不被缓存呢？这就需要用到include以及exclude属性

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• 官方文档：API — Vue.js

代码：

<template>
  <div id="app">
    <!--include:匹配的组件会被缓存-->
    <!--注意：include的value值是组件的name值-->
    <!--如果router-view有多个组件都需要被缓存。可以使用数组的形式  :include="['Login','Regist']"  -->
    <!--exclude:匹配的组件都不会被缓存-->

    <keep-alive include="Login">
      <router-view/>
    </keep-alive>


    <!--<router-view/>-->
  </div>
</template>

<style lang="scss">


</style>

两个新的生命周期钩子

作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。只适用于keep-alive

activated ：路由组件被激活时触发。（当进入缓存的路由组件时触发）

deactivated：路由组件失活时触发。（当离开缓存的路由组件时触发）

使用方法：

接着上面的代码，我们之缓存了Login组件，Regist组件并没有被缓存。所以现在的效果是每次切换的随机数都不一致。

第一次切换：

 第二次切换：

 上面的效果图可以看出来，虽然每次传的参数都不一样，但是登录组件一直是都是保存第一次传过来的值。这是时候如果要同步注册组件传过来的参数。就需要用到activated这个生命周期。

代码：

<template>
    <div>
        <el-card class="box-card" style="margin: 100px auto;text-align: center;width: 430px;">
            <div slot="header" class="clearfix" style="text-align: center;font-weight: bolder;font-size: 20px">
                <span>登录</span>
            </div>
            <el-input
                    prefix-icon="el-icon-user-solid"
                    style="width: 80%;margin-top: 20px"
                    type="text"
                    placeholder="请输入用户名"
                    v-model="userName"
                    show-word-limit
            >
            </el-input>
            <el-input prefix-icon="el-icon-lock" style="margin-top: 20px;width: 80%" placeholder="请输入密码" v-model="pwd" show-password></el-input>
            <el-button style="width: 51%;margin-top: 40px;" type="primary" @click="login">登录</el-button>
            <div style="margin-top: 20px">
                <button @click="toRegist">注册</button>
            </div>

        </el-card>
    </div>
</template>

<script>
    export default {
        name:'Login',
        data(){
            return {
                userName:'',
                pwd:'',
            }
        },
        methods:{
            toRegist(){
                this.$router.go(-1)
            },
            login(){
                // localStorage.setItem('token','fdfjkdfjksdfdkf');
                this.$router.push('/index')
            }
        },
        created(){
            this.userName = this.$route.query.id
        },
        beforeDestroy(){
            console.log('我马上被销毁了');
        },
        // 当缓存组件被激活的时候执行
        activated(){
            this.userName = this.$route.query.id
        },
    }
</script>

<style scoped>

</style>

以上就是缓存路由组件的基本使用。

        每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

        组件的生命周期分为四个阶段：create（创建）、mount（挂载）、update（更新）、destroy（销毁） 。每个阶段有"之前"、"之后"两个，总共有 8 个生命周期钩子函数。

Vue 生命周期示意图：

生命周期函数 

beforeCreate：

1. 刚初始化了一个 Vue 空的实例对象；
2. data 和 methods 还没有初始化；
3. 真实 DOM 没有渲染出来；

created：

1. 组件创建结束；
2. 可以操作 data 数据，和调用 methods 方法；
3. 进行ajax请求异步数据的、初始化数据；
4. 真实 DOM 没有渲染出来；

beforeMount：

1. 模板编译好了，尚未挂载到页面；
2. 真实 DOM 没有渲染出来；

mounted：

1. 组件挂载好了；
2. 可以进行真实dom的操作；

beforeUpdate：

1. data 数据更改后触发；
2. 可以触发多次,只要数据更新就会触发；

updated：

1. 页面更新完成时触发；
2. 可以触发多次,只要数据更新就会触发；

beforeDestroy：

1. 销毁前触发；
2. vue 实例上 data，methods，指令等处于可用状态；
3. 可以执行计时器的关闭，第三方实例的删除；

destroyed：

1. 销毁后触发；
2. vue 实例上 data，methods，指令等处于不可用状态；

keep-alive

        添加 keep-alive 标签后会增加 activated 和 deactivated 这两个生命周期函数，初始化操作放在 actived 里面，一旦切换组件，因为组件是缓存的而没有被销毁，所以它不会执行销毁阶段的钩子函数，所以移除操作需要放在 deactived 里面，在里面进行一些善后操作，这个时候 created 钩子函数只会组件首次加载时执行一次，销毁的钩子函数一直没有执行。

        activated(组件激活时)：被 keep-alive 缓存的组件激活时调用，可以初始化一些数据。

        deactivated(组件停用时)：被 keep-alive 缓存的组件停用时调用。在deactived里面，在里面进行一些善后操作。

nextTick()

        在下次 DOM 更新循环结束之后执行回调。在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM ，简单理解：数据更新了，在dom渲染完成后调用该函数。

        注意：在 Vue 生命周期的 created() 钩子函数进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中。 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的 DOM结构的时候，这个操作都应该放进 Vue.nextTick() 的回调函数中。