Vue_LifeCycle

 

 

 

 

 

최초 형성 시
beforeCreate
created
beforeMount
mounted
과정을 거침

단일 컴포넌트 라이프 사이클

 

 

 

 

부모
- beforeCreate
- created
- beforeMount

자식
- beforeCreate
- created
- beforeMount
- mounted

부모
- mounted
===================
자식
- beforeUpdate
- updated

부모 - 자식 컴포넌트 라이프 사이클(부모의 beforeMount까지 진행 -> 자식 -> 부모 mounted 순서)

 

 

 

 

 

HelloWorld

 

<template>
  <div>
    {{ mesg }}
  </div>
</template>

<script>
export default {
    data: function(){
        return {mesg:"Hello World"}
    },
    //life-cycle함수 --> arrow 함수 사용 안됨(this)
    beforeCreate: function(){
        console.log("beforeCreate: ", this);
    },
    created: function(){
        console.log("created");
    },
    beforeMount: function(){
        console.log("beforeMount");
    },
    mounted: function(){                //화면상에 랜더링이 됨
        console.log("mounted===============:: ", this.$el, "\n", this.mesg);
        this.mesg='happy로 변경';
        console.log("mounted2===============:: ", this.mesg);
    },
    beforeUpdate: function(){
        console.log("beforeUpdate+++++++++++++++++");
    },
    updated: function(){
        console.log("updated+++++++++++++++++");
    },
    beforeDestroy: function(){
        console.log("beforeDestroy");
    },
    destroyed: function(){
        console.log("destroyed");
    }
}
</script>

<style>

</style>

 

App

<template>
  <div>

    <HelloWorld/>

  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
    components:{
        HelloWorld
    },
    data: function(){
        return {mesg:"App.vue"}
    },
    beforeCreate: function(){
        console.log("App.beforeCreate: ", this);
    },
    created: function(){
        console.log("App.created");
    },
    beforeMount: function(){
        console.log("App.beforeMount");
    },
    mounted: function(){                //화면상에 랜더링이 됨
        console.log("App.mounted===============: ", this.$el, "\n", this.mesg);
        this.mesg='happy로 변경';
        console.log("App.mounted2==============: ", this.mesg);
    }


}
</script>

<style>

</style>