
1. Creation: 컴포넌트 초기화 단계 라이프사이클 중에서 가장 처음 실행된다. 아직 Virtual DOM 객체가 생성되지 전이다. (DOM 접근, this.$el 사용 불가) 클라이언트 단과 서버단 렌더링 모두에서 처리해야할 일 구현한다. 컴포넌트 초기에 세팅되어야할 데이터 페치 구현 beforeCreate 메소드 컴포넌트 객체가 생성된 직후에 자동으로 호출된다. 아직 컴포넌트의 속성들도 생성되기 전이다.(data, events 사용불가) created 메소드 컴포넌트 객체가 생성되고, 컴포넌트의 속성들도 만들어진 후에 자동으로 호출된다. (data, events 사용가능) 아직 템플릿, Virtual DOM 객체가 생성되기 전이다. 컴포넌트의 속성들과 관련된 초기화 작업을 구현하기 적당한 곳이다..

input 태그 입력 값 a b a 타입 : {{typeof a}} b 타입 : {{typeof b}} a * b : {{a * b}} a * b 타입 : {{typeof (a * b)}} a + b : {{a + b}} a + b 타입 : {{typeof (a + b)}} 위의 코드를 실행했을 때는 vue객체의 data에 있는 a와 b의 초기화 설정 때문에 각 변수와 덧셈을 typeof를 했을 때 결과 값이 number로 출력 된다. 그 후 input 태그에 숫자를 직접 입력하게 되면 각 변수와 덧셈 결과는 string 타입이 된다. (+ 덧셈 결과도 문자열 덧셈으로 처리된다.) 자바스크립트에서 문자열 연산을 할 경우 62 4 12 3 해결 let a = Number(a); let a = parseIn..