vue 生命周期附例子详解

上图~

• beforeCreate();

<div id="app">{{name}}</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            name:'liuxixi'
        },
        beforeCreate(){
            console.log('即将创建');    
            console.log(this.$data);  =>  undefined
            console.log(this.$el);    =>  undefined
        }
    });
</script>    

• created();

<div id="app">{{name}}</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            name:'liuxixi'
        },
        created(){
            console.log('创建完毕');    
            console.log(this.$data);  =>  {__ob__: Observer}
            console.log(this.$el);    =>  undefined
        }
    });
</script>  

• beforeMount();

<div id="app">{{name}}</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            name:'liuxixi'
        },
        beforeMount(){
            console.log('即将挂载');    
            console.log(this.$data);  =>  {__ob__: Observer}
            console.log(this.$el);    =>  <div id="app">{{name}}</div>
        }
    });
</script>  

• mounted();

<div id="app">{{name}}</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            name:'liuxixi'
        },
        mounted(){
            console.log('挂载完毕');    
            console.log(this.$data);  =>  {__ob__: Observer}
            console.log(this.$el);    =>  <div id="app">liuxixi</div>
        }
    });
</script>  

• beforeUpdate();

<div id="app"  ref="app">{{name}}</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            name:'liuxixi'
        },
        beforeUpdate(){
            console.log('即将更新');    
            let name = this.$refs.app.innerHTML;
            console.log('name'：name);   //手动更改app.name='liu'
            => name:liuxixi （得到更改之前的name值）
        }
    });
</script> 

• updated();

<div id="app"  ref="app">{{name}}</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            name:'liuxixi'
        },
        updated(){
            console.log('更新完毕');    
            let name = this.$refs.app.innerHTML;
            console.log('name'：name);   //手动更改app.name='liu'
            => name:liu （得到更改之后的name值）
        }
    });
</script> 

• beforeDestroy();

<div id="app"  ref="app">{{name}}</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            name:'liuxixi'
        },
        beforeDestroy(){
            console.log('销毁之前');    
        }
    });
</script> 

• destroyed();

<div id="app"  ref="app">{{name}}</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            name:'liuxixi'
        },
        destroyed(){
            console.log('销毁之后'); 
            //此时手动修改app.name = 'liuxin';视图不再更新   
        }
    });
</script>