9 vue2.0状态

生命周期 *代表常用

beforeCreate    组件实例刚刚被创建,属性都没有
created 实例已经创建完成，属性已经绑定
beforeMount 模板编译之前
mounted 模板编译之后，代替之前ready  *
beforeUpdate    组件更新之前
updated 组件更新完毕  *
beforeDestroy   组件销毁前
destroyed   组件销毁后
new Vue({
    el:'#box',
    data:{
        msg:'welcome vue2.0'
    },
    methods:{
        update(){
            this.msg='大家好';
        },
        destroy(){
            this.$destroy();
        }
    },
    beforeCreate(){
        console.log('组件实例刚刚被创建');
    },
    created(){
        console.log('实例已经创建完成');
    },
    beforeMount(){
        console.log('模板编译之前');
    },
    mounted(){    //代替之前ready
        console.log('模板编译完成');
    },
    beforeUpdate(){
        console.log('组件更新之前');
    },
    updated(){
        console.log('组件更新完毕');
    },
    beforeDestroy(){
        console.log('组件销毁之前');
    },
    destroyed(){
        console.log('组件销毁之后');
    }
});
<div id="box">
    <input type="button" value="更新数据" @click="update">
    <input type="button" value="销毁组件" @click="destroy">
    {{msg}}
</div>