[실습] 라이프사이클

각각의 라이프사이클에 커스텀로직을 추가했을 때 코드에서 어떻게 동작하는지 확인해봅시다~

이번 실습에서 확인해 볼 라이프사이클은 beforeCreate, created, mounted, updated 총 4가지이다.

실습 시작~~

아래와 같이 코드들을 작성하여 html 파일로 저장하였다.

이후 저장된 파일을 Chrome으로 확인해보았을 때, 콘솔창에 표시되는 값은 아래 그림과 같았다.

분명히 update에 대한 코드를 작성했는데도 불구하고, console창에 로그가 찍히지 않은 이유!!

message 데이터의 값이 변경되지 않았기 때문!!

따라서, update 콘솔 로그가 찍히도록 하기위해서는 아래 그림과 같이 코드를 한 줄 더 추가해야한다.

이 코드는 update 전에 작성한다.

웹 페이지에 id가 "app"인 message가 부착되기 전, 해당 message의 값을 변경하였다.

그 후 chrome에서 다시 화면을 새로고침하면, 아래 그림과 같이 메시지가 변경되고 update 콘솔 로그가 찍힌 것을 확인할 수 있다.

이번 실습을 통해 update 라이프사이클이 뭔지 감은 온 것 같다~

update 라이프사이클 : 뷰 인스턴스에서 데이터 변경이 일어나 화면이 다시 그려졌을 때 호출되는 로직