[Vue] MVVM Pattern, Vue 인스턴스 생성

MVVM Pattern

• 애플리케이션 로직을  UI로부터 분리하기 위해 설계된 디자인 패턴

 

- Model

• JavaScript의 Object 자료 구조 ( { key: value } )
• Object는 Vue Instance 내부에서 데이터로 사용
• 데이터가 바뀌면 View(DOM)가 반응

 

- View

• DOM(HTML)
• 데이터의 변화에 따라 바뀌는 대상

 

- View Model

• 모든 Vue Instance
• View와 Model 사이에서 데이터와 DOM에 관련된 모든 일 처리
• ViewModel을 활용해 Data를 얼만큼 잘 처리해서 보여줄 것인지(DOM)를 고민하는 것

 

Vue 인스턴스 생성

• Vue.js 코드 작성 순서 : 데이터가 변화하면 DOM이 변경 → 1. 데이터 로직 작성 2. DOM 작성
• CDN 작성

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

 

 

<div id="app">
  <p>{{ numbers | getOddNums }}</p>
</div>

<scripts>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'Hi!',
      number: 2,
      numbers: [1, 2, 3, 4, 5],
    },
    methods: {
      greeting: function () {
        console.lod('Hi!')
      }
    },
    computed: {
  	  doubleNum: function () {
        return this.number * 2
      }
    },
    watch: {
      num: function () {
      	console.log(`${this.number}이 변경되었습니다.`)
      },
    },
    filters: {
      getOddNums: function (nums) {
        const OddNums = nums.filter(function (num) {
          return num % 2
        })
      },
    },
  })
</scripts>

- Vue instance (=Vue Component)

• 모든 Vue 앱은 Vue 함수로 새 인스턴스를 만드는 것부터 시작
• Vue 인스턴스를 생성할 때는 Options 객체를 전달해야함 (Options를 사용하여 원하는 동작 구현)

 

- el

• Vue 인스턴스에 연결(마운트)할 기존 DOM 엘리먼트
• CSS 선택자 문자열 혹은 HTML Element로 작성
• new를 이용한 인스턴스 생성 때만 사용

 

- data

• Vue 인스턴스의 데이터 객체, 상태 데이터 정의
• Vue template에서 interpolation을 통해 접근 가능
• v-bind, v-on과 같은 directive에서도 사용 가능
• Vue 객체 내 다른 함수에서 this키워드를 통해 접근 가능

 

- methods

• Vue 인스턴스에 추가할 메서드
• Vue template에서 interpolation을 통해 접근 가능
• v-on과 같은 directive에서도 사용 가능
• Vue 객체 내 다른 함수에서 this키워드를 통해 접근 가능

* this

• Vue 함수 객체 내에서 vue 인스턴스를 가리킴

* 화살표 함수를 사용하면 안되는 경우 : data, methods

 

- computed

• 데이터를 기반으로 하는 계산된 속성
• 함수의 형태로 정의하지만 함수가 아닌 함수의 반환값이 바인딩 됨 (반드시 반환 값이 있어야 함)
• 종속된 데이터가 변경될 때만 함수 실행

* computed와 methods

• computed는 종속 대상을 따라 저장(캐싱)
  즉, 종속 대상이 바뀌지 않는 한 computed에 작성된 함수를 여러 번 호출해도 계산을 다시 하지 않고 계산되어 있던 결과를 반환
• methods는 호출하면 렌더링을 다시 할 때마다 항상 함수를 실행

 

- watch

• 데이터를 감시
• 데이터에 변화가 일어났을 때 실행되는 함수

* computed와 watch

• computed : 특정 데이터를 직접적으로 사용/ 가공하여 다른 값으로 만들 때 사용, 선언형 프로그래밍 방식
  '특정 값이 변동하면 해당 값을 다시 계산해서 보여준다.'
• watch: 특정 데이터의 변화 상황에 맞춰 다른 데이터 등이 바뀌어야 할 때 주로 사용, 명령형 프로그래밍 방식
  '특정 값이 변동하면 다른 작업을 한다.'

* 선언형 & 명령형

• 선언형 프로그래밍 : 계산해야 하는 목표 데이터를 정의
• 명령형 프로그래밍 : 데이터가 바뀌면 특정 함수를 실행

 

- filter

• 텍스트 형식화를 적용할 수 있는 필터
• interpolation 혹은 v-bind를 이용할 때 사용 가능
• JS 표현식 마지막에 '|' (파이프)와 함께 추가되어야 함
• 이어서 사용 가능 (chaining)