1. 创建期间的钩子函数（4个）

beforeCreate --- vue 实例"创建前"/组件创建前 ，特点：数据没有初始化

created -- vue实例创建后/组件创建后，特点：可以操作数据,可以访问方法

beforeCreate 和 created A 数据没有初始化 B 可以操作数据

  <div id="app">
        <h1>vue中生命周期钩子函数</h1>
        <h2>Vue实例从创建到销毁的过程 中 会 伴随着一些函数 的 自调用!</h2>
        <h2>特点：自动调用的，只是他们的调用的时间节点 有 先 有 后。</h2>

        <h3>{{message}}</h3>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        // vue实例 （组件）
        var vm = new Vue({
            el:'#app',
            // 数据中心
            data(){
                return {
                    message:'漠河'
                }
            },
            // 生命周期钩子函数
            // vue实例创建期间的钩子函数
            //（1） beforeCreate -- vue实例创建前/组件创建前
            // 特点：数据没有初始化
            beforeCreate(){
                console.group('beforeCreate -- vue实例创建前');
                // 1.在这个时候，这个钩子函数，是 读取不到 视图层 渲染的 dom节点。
                console.log('%c%s','color:blue','el:'+this.$el);
                // 2.在这个时候，这个钩子函数，是 读取不到 数据中心 data中的数据的。
                console.log('%c%s','color:blue','data:'+this.$data);
            },
             //（1） created -- vue实例创建后/组件创建后
            //  特点：可以操作数据,可以访问方法
            created(){
                console.group('created -- vue实例创建后');
                // 1.在这个时候，这个钩子函数，是 读取不到 视图层 渲染的 dom节点。
                console.log('%c%s','color:blue','el:'+this.$el);
                // 2.在这个时候，这个钩子函数，可以读取 到 数据中心 data中的数据的。
                console.log('%c%s','color:blue','data:'+this.$data);
                console.log(this.message);
                // 3.在这个时候，这个钩子函数，可以调用 到 方法中心 methods中的方法。
                console.log(this.run());
            },
            methods:{
                run(){
                    return '我喜欢唱歌!'
                }
            }
        })
    </script>

预览：

  mounted -- DOM挂载前 ，特点：还未生产 DOM 将编译完成的HTML挂载到对应虚拟DOM时，触发的钩子函数，此时页面没有内容。

  beforeMount -- DOM挂载后，特点：可以操作 DOM

  mounted在整个实例中只执行一次 编译好的HTML挂载到页面完成，触发的钩子函数，此钩子函数中一般会做一些ajax的请求获取数据。进行数据初始化

  beforeMount 和 mounted A 还未生产 DOM B 可以操作 DOM

    <div id="app">
        <h1>vue中生命周期钩子函数</h1>
        <h2>Vue实例从创建到销毁的过程 中 会 伴随着一些函数 的 自调用!</h2>
        <h2>特点：自动调用的，只是他们的调用的时间节点 有 先 有 后。</h2>

        <h3 id="info">{{message}}</h3>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    message:'漠河'
                }
            },
            // 生命周期钩子函数
            // beforeMount -- DOM挂载前
            // 特点：还未生产 DOM
            beforeMount(){
                console.group('beforeMount -- DOM挂载前');
                // 1. 此时的$el为“虚拟的”DOM节点
                console.log('%c%s','color:blue','el:'+this.$el);
                // (1).在这个时候，我们在 这个钩子函数 里面， 查看html中指定的dom元素
                // console.log(document.querySelector('#info').innerHTML);
                console.log(document.querySelector('#app').innerHTML);

                // 2.在这个时候，这个钩子函数, 是 可以读取到  数据中心 data中的数据，和 方法中心中的方法。
                console.log(this.message);
                console.log(this.run());
            },
            // mounted -- DOM挂载后
            // 特点：可以操作 DOM
            mounted(){
                console.group('mounted -- DOM挂载后');
                // 1.此时的$el为“真实的”DOM节点
                console.log('%c%s','color:blue','el:'+this.$el);
                // (1).在这个时候，我们在 这个钩子函数 里面， 查看html中指定的dom元素
                // console.log(document.querySelector('#info').innerHTML);
                console.log(document.querySelector('#app').innerHTML);
            },
            methods:{
                run(){
                    return '我喜欢唱歌!'
                }
            }
        })
    </script>

预览：

2. 运行期间的钩子函数 (2个）

beforeUpdate 数据更新之前，特点：查看 视图层中的 “数据变化前” 的值updated 数据更新之后，特点：可以获取 数据更新后的 最终数据

 <div id="app">
        <h1>vue中生命周期钩子函数</h1>
        <h2>Vue实例从创建到销毁的过程 中 会 伴随着一些函数 的 自调用!</h2>
        <h2>特点：自动调用的，只是他们的调用的时间节点 有 先 有 后。</h2>

        <div>
            <h3 id="info">{{num}}</h3>
            <button @click="num++;">点击按钮，查看数据前后变化</button>
        </div>

    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    num:100
                }
            },
            // vue实例“运行期间”的生命周期钩子函数
            // beforeUpdate -- 数据更新前
            // 特点：查看 视图层中的 “数据变化前” 的值
            beforeUpdate(){
                console.group('beforeUpdate -- 数据更新之前');
                // 1.在这个时候，我们在 这个钩子函数 里面， 查看html中指定的dom元素
                console.log('查看 视图层中的 “数据变化前” 的值:'+document.querySelector('#info').innerHTML);

                // 2.一般，我们不在这个钩子函数中，去查看 数据中心中的值，（因为 你查看的 值 是 “被 更新”后的值）
                // console.log(this.num);

            },
            // updated -- 数据更新后
            // 特点：可以获取 数据更新后的 最终数据
            updated(){
                console.group('updated -- 数据更新后');
                // 1.在这个时候，我们在 这个钩子函数 里面，查看数据中心data中的数据
                console.log(this.num);
            },
            methods:{

            }
        })
    </script>

预览：

3. 销毁期间的钩子函数 (2个）

beforeDestroy -- vue实例销毁前，特点：可以 正常 操作 当前 实例中的 所有的 数据 和 方法。

destroyed -- vue实例销毁后

<div id="app">
        <h1>vue中生命周期钩子函数</h1>
        <h2>Vue实例从创建到销毁的过程 中 会 伴随着一些函数 的 自调用!</h2>
        <h2>特点：自动调用的，只是他们的调用的时间节点 有 先 有 后。</h2>

        <hr>
        <h3>{{num}}</h3>
        <h3>{{total}}</h3>
        <button @click="add">自增</button>
        <hr>
        <button @click="play">销毁组件</button>

    </div>

    <script src="./js/vue.js"></script>
    <script>
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    num:100
                }
            },
            computed:{
                total(){
                    return this.num*100;
                }
            },
            // vue实例“销毁期间”的生命周期钩子函数
            // beforeDestroy -- vue实例销毁前
            beforeDestroy(){
                console.group('beforeDestroy -- vue实例销毁前');
                // 1. 我们正常的去 操作 当前 实例中的 所有的 数据 和 方法
                console.log(this.num);
                console.log(this.run());
            },
            // destroyed -- vue实例销毁后
            destroyed(){
                console.group('destroyed -- vue实例销毁后');
                console.log(this.num);
            },
            methods:{
                run(){
                    return '我喜欢唱歌!'
                },
                add(){
                    this.num++;
                },
                play(){
                    // 销毁组件
                    this.$destroy();
                }
            }
        })
    </script>

预览：