Vue.js 라이프사이클 예제

오늘은 vue 인스턴스의 라이프 사이클에 대해 공부해보도록 하겠습니다.

인스턴스의 라이프 사이클을 알면 app을 보다 디테일하게 다룰 수 있습니다.

때문에 반드시 알아야 합니다.

 

vue 인스턴스의 라이프사이클은

beforecreate() 인스턴스가 생성되기 전이다.->

created() 인스턴스가 생성되어 데이터를 사용할 수 있습니다.->

beforeMount() div태그 #app의 html 코드가 생성되기 전 상태->

mount()html코드가 div태그 #app에 html코드가 찍혀있는 상태->

beforeupdate() 데이터가 업데이트 되기 전->

updated()되고난후->

beforedestroy()해당 페이지를 종료하기 전->

destroy() 해당 페이지가 종료된 상태

<template>
  <div>
    <h1>this is Home page</h1>
    <p>{{names}}</p>
    <button v-on:click="dateupdate()">click</button>
  </div>
</template>

<script>
export default{
  data(){
   return{
     names:"balmostory"
    }
  },
  beforeCreate(){
    console.log("beforeCreate",this.names)
  },
  created(){
    console.log("created",this.names)
  },
  beforeMount(){
    alert("beforeMount")
  }
  ,
  mounted(){
    alert("mounted")
  },
  beforeUpdate(){
    alert("beforeUpdate")
  },
  updated(){
    alert("updated")
  },
  beforeDestroy(){
    alert("beforeDestroy")
  },
  destroyed(){
    alert("destroyed")
  },
  methods:{
    dateupdate(){
      this.names="hihihi";
    }
  }
}
</script>


<style scoped>
h1{
  color: red;
  font-size: 20px;
}
</style>

펌 https://balmostory.tistory.com/13