1.beforeCreate函数：

<script>
    beforeCreate:function(){
                <!--组件创建之前调用该函数-->
    }
</script>

2.created函数：

<script>
    <!--组件的数据挂载发生在这里-->
    created:function(){
            <!--组件创建之后，使用该组件就会调用该函数
                在这个方法中可以操作来自后端的数据
                即Vue中重要的概念：数据驱动视图
                应用：发起ajax请求-->
</script>

 

3.beforeMount函数：

<scirpt>
    beforeMount:function(){
                <!--挂载数据到DOM之前会调用该函数,并且相关的render函数首次被调用-->
    }
</script>

 

4.mounted函数：

<script>
    mounted:function(){
            <!--挂载数据到DOM之后会调用该函数(即Vue作用之后的DOM) 操作DOM-->
    }
</script>

5.beforeUpdate函数：

<script>
    beforeUpdate:function(){
            <!--在数据发生改变后更新DOM之前调用该函数
                应用：可以获取原始的DOM-->
    }
</script>

 

6.Updated函数： 

<script>
    Updated:function(){
            <!--在更新DOM之后调用该函数-->
            <!--应用：可以获取最新的DOM 当这个钩子被调用时，组件 DOM 已经更新，
                所以你现在可以执行依赖于 DOM 的操作-->
    }
</script>

7.beforeDestory函数：

<script>
    beforeDestroy:function(){
                <!--实例销毁之前调用该函数
                    且在这一步时，实例仍然可以使用-->
    }
</script>

8.destroy函数：

<script>
    destroyd:function(){
            <!--实例销毁之后调用该函数
                且对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，
                所有的子实例也都被销毁。-->
    }
</script>

 

9.activated函数：

<script>
    activated:function(){
            <!--被 keep-alive 缓存的组件激活时调用该函数。-->
            console.log("组件被激活");
    }
</script>

 

10.deactivated函数：

<script>
    deativated:function(){
            <!--被 keep-alive 缓存的组件失活时调用该函数。-->
            console.log("组件被停用了");
    }
</script>

 

补充在activated和deactivated钩子函数中说到的<keep-alive></keep-alive>：

Vue内置组件<keep-alive></keep-alive>：能在组件的切换过程中将状态保留在内存中防止重复渲染DOM。     即包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们，主要用于保留组件状态或避免重新渲染。              但是不是需要将所有的组件都缓存起来，需要看客户的业务需求。

当组件在<keep-alive></keep-alive>内被切换，它的 activated和deactivated这两个生命周期钩子函数将会被对应执行。 

<keep-alive>
    <component :is="view"></component>
</keep-alive>