Vue生命周期

Vue-组件的生命周期

　　Vue 实例在被创建时都要经过从创建到挂载再到更新、卸载的一系列过程，该过程中会运行一些叫做**生命周期钩子**的函数，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。

一、钩子函数的执行时间

1、beforeCreate

　　在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用，

2、created

　　使用该组件，就会调用created方法在created这个方法中可以操作后端的数据，数据响应视图
　　应用：发起ajax请求

3、beforeMount

　　挂载数据到DOM之前会调用：相关的 render 函数首次被调用。

4、mounted

　　挂载数据到DOM之后会调用 Vue 作用以后的DOM

5、beforeUpdate

　　在更新DOM之前调用此钩子函数应用：可以获取原始的DOM

6、updated

　　在更新DOM之后调用此钩子函数应用：可以获取最新的DOM

7、beforeDestroy

　　实例销毁之前调用。在这一步，实例仍然完全可用。

8、destroyed

　　Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

还有两个特殊的（配合使用keep-alive）：[activated](https://cn.vuejs.org/v2/api/#activated)、[deactivated](https://cn.vuejs.org/v2/api/#deactivated)

9、 keep-alive组件被激活时调用

10、deactivated

　　 keep-alive组件被停用时调用

钩子函数中该做的事情

created

> 实例已经创建完成，因为它是最早触发的原因可以进行一些数据，资源的请求。

mounted

> 实例已经挂载完成，可以进行一些DOM操作

beforeUpdate

> 可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

updated

> 可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
>
> 该钩子在服务器端渲染期间不被调用。

destroyed

> 可以执行一些优化操作

keep-alive

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div id="app">
        <!-- <App></App> -->
    </div>
    <script src="js/vue.js"></script>
    <script type="text/javascript">

        /*
        生命周期的钩子函数   函数
        beforeCreate
        created
        beforeMount
        mounted
        beforeUpdate
        updated
        activated
        deactivated
        beforeDestroy
        destroyed


        */
        var Test = {
            data:function() {
                return {
                    msg:'hello world'
                }
            },
            template:`
                <div>
                    <div>{{msg}}</div>
                    <button @click = 'changeHandler'>改变</button>
                </div>
            `,
            methods:{
                changeHandler(){
                    this.msg = this.msg +'哈哈哈';
                }
            },
            beforeCreate:function() {
                // 组件创建之前
                console.log(this.msg);
            },
            created:function() {
                // 组件创建之后

                // 使用该组件，就会调用created方法 在created这个方法中可以操作后端的数据，数据响应视图
                // 应用： 发起ajax请求
                console.log(this.msg);
                this.msg = '改变了吧'
            },
            beforeMount:function  () {
                // 挂载数据到DOM之前会调用
                console.log(document.getElementById('app'));
            },
            mounted:function() {
                // 挂载数据到DOM之后会调用  Vue 作用以后的DOM
                console.log(document.getElementById('app'));
            },
            beforeUpdate(){
                // 在更新DOM之前 调用此钩子函数 应用：可以获取原始的DOM
                console.log(document.getElementById('app').innerHTML);
            },
            updated(){
                // 在更新DOM之后 调用此钩子函数 应用：可以获取最新的DOM
                console.log(document.getElementById('app').innerHTML);
            },
            beforeDestroy(){
                console.log('beforeDestroy');
            },
            destroyed(){
                console.log('destroyed');
            },
            activated(){
                console.log('组件被激活');
            },
            deactivated(){
                console.log('组件被停用');

            }

        }

        var App = {
            data:function() {
                return {
                    isShow:true
                }
            },
            // Vue的内置组件，能在组件的切换过程中将状态保留在内存中父，防止重复渲染DOM
            template:`
                <div class='app'>
                    <keep-alive>
                        <Test v-if = 'isShow'></Test>
                    </keep-alive>
                    <button @click = 'isShow = !isShow'>改变生死</button>
                </div>

            `,
            components:{
                Test
            },
            methods:{

            }
        }
        new Vue({
            el:'#app',
            data:function() {
                return {
                    
                }
            },
            template:`<App />`,
            components:{
                App
            }
        });
    </script>
    

</body>
</html>