[Vue] Vue시작(4) - 인스턴스 속성

el, data, computed

• el옵션에 class형 선택자를 사용할 경우에는 가장 첫 번째 요소가 선택된다.
• el옵션을 사용하지 않았을 경우 동적으로 [vueInstance].$mount("#test")와 같이 연결할 수도 있다.
• computed옵션에서 지정한 값이 함수더라도 Vue인스턴스는 프록시 처리해서 속성처럼 취급한다 [vueInstance].속성명으로 접근 가능하게된다.
• Vue인스턴스의 모든 옵션정보를 다루는 $options 속성을 이용하면 실제 함수를 확인할 수 있다.

getter / setter

computed속성은 기본적으로 읽기전용 속성이지만, getter와 setter를 등록해서 값을 변경할 수 있다.

      const a = new Vue({
        el: "#example",
        data: { num: 100 },
        computed: {
          amount: {
            get: function () {},
            set: function (newValue) {
              this.num = newValue;
            },
          },
        },
      });

get, set메서드를 명시적으로 호출하는게 아니다. 인스턴스 이름인 a의 amount속성에 값을 대입하거나 호출하면 된다.

a.amount = 1000;
// amount는 1000이 된다.
a.amount
// 1000

methods

computed속성은 종속된 값에 의해 결과값이 캐싱된다. 즉 함수 내부의 코드가 실행되지 않고 계산값을 재사용한다.
methods는 다르다 매번 함수내부의 코드를 재실행한다.

methods에서는 Arrow function을 사용해서는 안된다. this객체가 Window객체를 가리키게 되기 때문이다. 메서드 내부에서 데이터 속성들을 이용하기 때문에 this가 바뀌게되면 Vue 인스턴스 내부 데이터에 접근할 수 없게된다.

watch

watch는 비동기로 동작하기 때문에 긴 시간이 필요한 작업에 필요하다. 일반적인 다른 경우에는 computed를 사용하는 것이 알맞다.