[Vue.js] Vue 인스턴스 수명주기(Lifecycle Diagram) 테스트 해보기

떠돌이개발자Oct 27, 2023

뷰 인스턴스의 수명주기를 확인하기 위해 console.log()로 출력해 본 예제입니다. 아래 HTML 파일을 다운받은 후 크롬브라우저나 익스플로어에서 열면 확인할 수 있어요. 파일을 연 후 F12키를 눌러 개발자모드로 들어가면 확인이 가능해요.

다음은 라이프사이클 스니펫입니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Vue LifeCycle Sample</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>
  </head>
  <body>
      <div id="logEx">
        {{msg}}
      </div>
      
      <script type="text/javascript">
        new Vue({
          el: '#logEx',
          data:{
            msg : 'Hello Vue.js!'
          },
          beforeCreate:function(){
            console.log("######## beforeCreate");
          },
          created:function(){
            console.log("######## created");
          },
          beforeMount:function(){
            console.log("######## beforeMount");
          },
          mounted:function(){
            console.log("######## mounted");
            //this.msg = "Complete mounted";
          },
          beforeUpdate:function(){
            console.log("######## beforeUpdate"); 
          }
          ,updated:function(){
            console.log("######## updated");
          }
          ,beforeDestory:function(){
          	console.log("######## beforeDestory");
          }          
          ,destoryed:function(){
          	console.log("######## destoryed");
          }
        });
      </script>
  </body>
</html>

[크롬 브라우저에서 html 불러온 결과]