组件的生命周期

　　在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。 

　　v-if 指令需要频繁的创建和销毁组件，已达到控制页面中部分内容显示与隐藏。这个过程太消耗资源，所以衍生出一个组件缓存的概念。

组件缓存：

1、内置组件中使用 <keep-alive></keep-alive>，被其包裹的组件在 v-if = false 的时候，不会销毁而是停用。v-if = true 不会创建而激活。

2、避免频繁创建组件对象的性能消耗。

        var App = {
            template:`
                <div>
                    <Keep-alive>
                        <Test v-if='isShow'></Test>
                    </Keep-alive>
                    <button @click='isShow = !isShow'>改变生死</button>
                </div>
            `,
            data(){
                return{
                    isShow:true
                }
            },
            components:{
                Test
            }
        }

二、生命周期的钩子函数。

beforeCreate:function(){ }：组件创建之前调用。

created:function(){ } ：组件创建之后调用。在该方法中可以操作后端数据，数据响应视图。

beforeMount:function(){ }：挂载数据到 DOM 之前调用。

mounted:function(){ } ：挂载数据到 DOM 之后调用，Vue 作用以后的 DOM。

beforeUpdate:function(){ }：更新 DOM 之前调用。

updated:function(){ }：DOM 更新之后调用。

beforeDestroy:function(){  }：组件销毁之前调用。

destroyed:function(){ }：组件销毁之后调用。

activated(){ }：keep-alive 组件被激活时调用。

deactivated(){ }：keep-alive 组件被停用时调用。

    <div id="app">
        <App></App>
    </div>
    <script type="text/javascript" src="vue/vue.js"></script>
    <script type="text/javascript">
        /*
        生命周期的钩子函数
        onMounted()
        onUpdated()
        onUnmounted()
        onBeforeMount()
        onBeforeUpdate()
        onBeforeUnmount()
        onErrorCaptured()
        onRenderTracked()
        onRenderTriggered()
        onActivated()
        onDeactivated()
        onServerPrefetch()*/
        var Test = {
            data(){
                return{
                    msg:'hello world'
                }
            },
            template:`
                <div>
                    <div>{{msg}}</div>
                    <button @click='changeHandler'>改变</button>
                </div>
            `,
            methods:{
                changeHandler:function(){
                    this.msg = this.msg + '哈哈哈';
                }
            },
            beforeCreate:function(){
                // 组件创建之前
                console.log(this.msg);
            },
            created:function(){
                // 组件创建之后

                // 使用该组件，就会调用created方法，在created这个方法中可以操作后端的数据，数据响应视图
                console.log(this.msg);
            },
            beforeMount:function(){
                // 挂载数据到DOM之前会调用
                console.log(document.getElementById('app'));
            },
            mounted:function(){
                // 挂载数据到DOM之后会调用 Vue作用以后的DOM
                console.log(document.getElementById('app'));
            },
            beforeUpdate:function(){
                console.log(document.getElementById('app').innerHTML);
            updated:function(){
                console.log(document.getElementById('app').innerHTML);
            },
            beforeDestroy:function(){
                // 组件销毁之前创建
                console.log("beforeDestroy");
            },
            destroyed:function(){
                // 组件销毁之后创建
                console.log("destroyd");
            },
            activated(){
                // 组件被激活
                console.log("组件被激活了");
            },
            deactivated(){
                // 组件被停用
                console.log("组件被停用了");
            }
        }
        var App = {
            template:`
                <div>
                    <Keep-alive>
                        <Test v-if='isShow'></Test>
                    </Keep-alive>
                    <button @click='isShow = !isShow'>改变生死</button>
                </div>
            `,
            data(){
                return{
                    isShow:true
                }
            },
            components:{
                Test
            }
        }
        new Vue({
            el:'#app',
            data(){
                return{
                }
            },
            template:``,
            components:{
                App
            }
        });
    </script>