Vue生命周期详解

    <div class="vues">
        <h1>{{msg}}</h1>
        <h1>{{count}}</h1>
        <button @click="add">点我加1</button>
        <button @click="destroy">点击销毁</button>
    </div>
    <script>
        new Vue({
            el: ".vues",
            data: {
                msg: '生命周期',
                count: 0
            },
            methods: {
                add: function () {
                    this.count++
                },
                destroy() {
                    this.$destroy()
                }
            },
            /*
                1、初始阶段
                    el有，template也有，最终编译template模板语句
                    el有，template没有，最终编译el模板语句
                    el没有的时候，需要手动调用vm.$mount(el) 进行手动挂载，然后流程才能继续，                                
                    此时如果template有，最终编译template模板语句
                    el没有的时候，需要手动调用vm.$mount(el) 进行手动挂载，然后流程才能继续，v 
                    此时如果template没有，最终编译el模板语句
                结论：流程想要控制：el必须存在
                el和template同时存在，优先选择template，如果没有template才选择el    
            */
            beforeCreate() {
                // 创建前：数据代理和数据监测的创建前
                // 此时还无法访问data当中的数据，包括methods也是无法访问的。
                console.log("beforeCreate");
            },
            created() {
                // 创建后：表示数据代理和数据监测创建完毕，可以访问data中的数据了。
                // 可以访问methods
                console.log('created');
            },
            beforeMount() {
                console.log('beforeMount');
            },
            mounted() {
                console.log('mounted');
            },
            beforeUpdate() {
                console.log("beforeUpdate");
            },
            updated() {
                console.log('updated');
            },
            beforeDestroy() {
                console.log('beforeDestroy');
            },
            destroyed() {
                console.log('destroyed');
            }
        })
    </script>