Vuejs - Instance

Vue Instance

• Vue를 구성하는 가장 기본적인 베이스이며 객체
• Vue의 라이프 사이클의 시작점으로 여러 동작들의 초기화 작업을 수행

인스턴스 생성

• Vue 앱은 new Vue를 통해 만들어진 루트 Vue 인스턴스로 구성되며 선택적으로 중첩이 가능하고 재사용이 가능한 컴포넌트 트리로 구성

한눈에 보기

new Vue({
    el: '#app', // Vue가 실행될 DOM요소, Vue 인스턴스에 연결할 HTML 요소
    
    template: '',
    
    data: {}, // Vue가 관찰하는 data 객체를 지정, 변경 사항을 즉시 감지
    
    props: [], // {}. 부모 컴포넌트로부터 전달받은 property들의 Array 혹은 Object
    
    methods: {}, // 화면 로직 제어와 관련된 함수를 정의하고 계산된 값을 리턴.
    
    computed: {}, // method와 유사하나 캐시를 사용.  
    
    watch: {} // 지정된 변수를 지켜보다 값이 변경되었을 때 정의된 함수 실행. 주로 비동기처리에 사용
});

Vue method

• Vue Instance는 생성과 관련된 data및 methods의 정의 가능
• method안에서 data를 “this.데이터이름”으로 접근 가능

    <div id="app">
      <div>method eng : {{helloEng()}}</div> <!-- Hello dona!-->
      <div>method kor : {{helloKor()}}</div> <!-- 안녕 (undefinded(미출력)) --> 
    </div>

	new Vue({
        el: '#app',
        data: {
          name : '도나',
        },
        methods: {
          helloEng : function() {
            return 'Hello ' + this.name;
          },
          helloKor : () => {
            return '안녕 ' + this.name;
          },
        },
      });

화살표 함수 사용 지양 주의!
화살표 함수는 부모 컨텍스트에 바인딩되기 때문에, 의도와 달리 Window객체에 바인딩 될 수 있다

Vue Filter

• 화면에 표시되는 텍스트의 형식을 쉽게 변환해주는 기능
• filter를 이용하여 표현식에 새로운 결과 형식을 적용
• 중괄호 보간법 [ {{}} ] 또는 v-bind 속성에서 사용이 가능
• 사용 위치에 따라 전역 필터, 지역 필터로 나뉜다.

<h3>{{ msg | count1 }}</h3>
<h3>{{ msg | count2('문자를 넣어보세요') }}</h3>

Vue.filter('count1', (val) => {
  if (val.length == 0) {
    return;
  }
  return `${val} : ${val.length}자`;
});
new Vue({
  el: '#app',
  data: {
    msg: '',
  },
  filters: {
    count2(val, alternative) {
      if (val.length == 0) {
        return alternative;
      }
      return `${val} : ${val.length}자`;
    },
  },
});

Vue computed

• 특정 데이터의 변경사항을 실시간으로 처리, 캐싱을 이용하여 변경이 없을 경우 캐싱된 데이터를 반환
• method는 사용시마다 계산, coputed는 Vue 인스턴스가 생성, 변경될 때 계산 후 저장(캐싱)한다.

Vue watch

• Vue Instance의 특정 property가 변경될 때 실행할 콜백 함수 설정
• data가 변경되었을 경우 다른 data를 변경하는 작업을 한다.

<div id="app">
    <div>
      <input type="text" v-model="a" />
    </div>
  </div>

var vm = new Vue({
  el: '#app',
  data: {
    a: 1,
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal);
    },
  },
});