<div class="vues">
        <h1>{{msg}}</h1>
        <h1>{{count}}</h1>
        <button @click="add">點(diǎn)我加1</button>
        <button @click="destroy">點(diǎn)擊銷毀</button>
    </div>
    <script>
        new Vue({
            el: ".vues",
            data: {
                msg: '生命周期',
                count: 0
            },
            methods: {
                add: function () {
                    this.count++
                },
                destroy() {
                    this.$destroy()
                }
            },
            /*
                1、初始階段
                    el有，template也有，最終編譯template模板語(yǔ)句
                    el有，template沒(méi)有，最終編譯el模板語(yǔ)句
                    el沒(méi)有的時(shí)候，需要手動(dòng)調(diào)用vm.$mount(el) 進(jìn)行手動(dòng)掛載，然后流程才能繼續(xù)，                                
                    此時(shí)如果template有，最終編譯template模板語(yǔ)句
                    el沒(méi)有的時(shí)候，需要手動(dòng)調(diào)用vm.$mount(el) 進(jìn)行手動(dòng)掛載，然后流程才能繼續(xù)，v 
                    此時(shí)如果template沒(méi)有，最終編譯el模板語(yǔ)句
                結(jié)論：流程想要控制：el必須存在
                el和template同時(shí)存在，優(yōu)先選擇template，如果沒(méi)有template才選擇el    
            */
            beforeCreate() {
                // 創(chuàng)建前：數(shù)據(jù)代理和數(shù)據(jù)監(jiān)測(cè)的創(chuàng)建前
                // 此時(shí)還無(wú)法訪問(wèn)data當(dāng)中的數(shù)據(jù)，包括methods也是無(wú)法訪問(wèn)的。
                console.log("beforeCreate");
            },
            created() {
                // 創(chuàng)建后：表示數(shù)據(jù)代理和數(shù)據(jù)監(jiān)測(cè)創(chuàng)建完畢，可以訪問(wèn)data中的數(shù)據(jù)了。
                // 可以訪問(wèn)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>