vue인스턴스

1. Vue인스턴스

  : Vue 생성자로 만든 객체

 

2. 옵션(options) 객체

  : Vue인스턴스를 생성할 때 전달하는 속성들을 담은 객체

  1) data 옵션

      - Vue인스턴스와 data 옵션에 주어진 객체 사이에 프록시를 두어 처리됨. (vue 인스턴스 내부에서 직접 이용되지 않음) 

      - 변경사항은 즉시 감지됨.

      - 접근

        : Vue인스턴스.키 = 값;

         데이터변수.키 = 값;

         vue인스턴스.$data.키 = 값;

   2) el 옵션

      - Vue인스턴스에 연결할 HTML DOM 요소를 지정.

      - 여러 개 요소에 지정할 수 없음 (여러 개 요소가 있을 경우 그 중 첫번째 요소에만 연결됨)

      - vue인스턴스가 HTML 요소와 연결되면 도중에 연결된 요소를 변경할 수 없기 때문에 Vue 인스턴스를 생성할 때 미리 지정하는 것이 좋음.

   3) computed 옵션 (계산형 속성)

      - 값으로 함수를 지정해 준다. 그러나 Vue 인스턴스는 프로시 처리를 하여 속성처럼 취급함.

      - 동기식 처리

   4) methods 옵션

      - Vue인스턴스에서 사용할 메소드를 등록

      - computed와의 차이점

        : computed는 결과값이 캐싱됨. 반면 methods의 메소드는 호출 될 때마다 매번 실행됨.

      - es6가 제공하는 화살표 함수는 사용해서는 안 됨

        : 화살표 함수 내부에서는 this가 vue인스턴스를 가리키지 않고 전역 객체(브라우저 환경에서는 Windows객체)를 가리키게 됨. 때문에 this가 바뀌게 되면 vue인스턴스 내부 데이터에 접근할 수 없음.

      - 사용

        : vue인스턴스.함수명()

         {{함수명()}}

   5) watch 옵션 (관찰 속성)

      - 비동기 처리

      - 긴 처리 시간이 필요한 작업에 적합. (ex. 외부 서버와의 통신 기능)

 

3. 인스턴스 라이프 사이클                  

    - beforeCreate : new Vue() 후,  데이터 관찰 기능/이벤트 감시자 설정 전에 호출

    - created : 데이터 관찰 기능/이벤트 감시자 설정 후, el과 template의 컴파일 전에 호출

    - beforeMount : el과 template의 컴파일 후, mount 전에 호출 

      **mount : vm.$el을 생성하여 el을 교체하는 것.

    - mounted : el에 Vue 인스턴스의 데이터가 mount 된 후에 호출

    - beforeUpdate : 가상DOM이 렌더링, 패치되기 전에 데이터가 변경될 때 호출

    - updated : 데이터의 변경으로 가상DOM이 다시 렌더링되고 패치된 후에 호출, 이미 컴포넌트의 DOM이 업데이트된 상태 

    - beforeDestroy : Vue 인스턴스가 제거되기 전에 호출

    - destroyed : Vue 인스턴스가 제거된 후에 호출, 호출되면서 Vue 인스턴스의 모든 디렉테브의 바인딩 해제, 이벤트 연결도 모두 제거