var vm = new Vue({
    name:'root',
    el:"#app",
    // 數(shù)據(jù)
    data: { a: 1 } / Function, // data類型根實(shí)例為Object，組件中為Function
    props:[]/{}, // 設(shè)置父組件傳遞給子組件的數(shù)據(jù)限制
    computed:{}, // 計(jì)算屬性
    watch:{}, // 監(jiān)控屬性
    methods:{}, // 事件操作
    // 資源
    directives:{}, // 內(nèi)部指令
    filters:{}, // 內(nèi)部過(guò)濾器
    components:{}, // 內(nèi)部組件
    // 生命周期：實(shí)例創(chuàng)建 => 編譯掛載 => 組件更新 => 銷(xiāo)毀
    beforeCreate(){
        console.log('beforeCreate ==> 實(shí)例創(chuàng)建')
    },
    created(){
        // 可以操作data, 但未生成DOM（未掛載）發(fā)起異步請(qǐng)求，初始化組件狀態(tài)數(shù)據(jù) data
        console.log('created ==> 實(shí)例創(chuàng)建完成，屬性已綁定')
    },
    beforeMount(){
        console.log('beforeMount ==> 模板編譯/掛載之前')
    },
    mounted(){
        // 已生成DOM到document中，可訪問(wèn)this.$el屬性
        console.log('mounted ==> 模板編譯/掛載之后')
    },
    beforeUpdate(){
        console.log('beforeUpdate ==> 組件更新之前')
    },
    updated(){
        // 操作DOM $('#box1')
        console.log('updated ==> 組件更新之后')
    },
    activated(){
        // 操作DOM $('#box1')
        console.log('activated ==> 組件被激活時(shí)（for keep-alive組件）')
    },
    deactivated(){
        console.log('deactivated ==> 組件被移除時(shí)（for keep-alive組件）')
    },
    beforeDestroy(){
        // 解除事件綁定，銷(xiāo)毀非Vue組件實(shí)例等 如：this.$off('event1') select2.destory()
        console.log('beforeDestroy ==> 組件銷(xiāo)毀之前')
    },
    destroyed(){
        console.log('destroyed ==> 組件銷(xiāo)毀之后')
    }
})