vue.js__life cycle, 라이프 사이클(생명주기)

박영은·2021년 11월 30일
0

vue

목록 보기
4/18

🌱 뷰 인스턴스 라이프 사이클

: 인스턴스의 상태에 따라 호출할 수 있는 속성들.
: 코드가 실행되고 화면에 뿌려지고, 보여지기까지의 모든 생명주기.


cf) 라이프 사이클 훅(hook) : 라이프 사이클 속성에서 실행되는 커스텀 로직.
: 개발자가 임의로 작성한 추가 로직

- vue 라이프 사이클 다이어그램


👉 가장 자주 쓰이는 것
created ) 화면에 불러오기 전 뿌려주는 거서.
mounted ) data가 create단에서 함수가 끝난 뒤 화면에 ui가 바뀔 때 쓰임.
beforeUpdated ) 화면 변화 직전
updated ) 화면 변화 직후
destroyed ) 화면 다 그려주고 마지막

라이프사이클 작성예제)
  <script>
  	new Vue({ 
      	    el:'#test',
            data:{ 
            	message: 'hello youngeun!'
            },
            beforeCreate: function(){
            	console.log('beforeCreate');
            },
            mounted: function(){
            	console.log('mounted');
              	this.message = 'hello vue!';
            }
      })
  </script>
profile
Front-end

0개의 댓글