[Vue] Vue 옵션 톺아보기 - Options/Data

data

• 컴포넌트 인스턴스에 따라 데이터 객체를 반환하는 함수
• 해당 데이터는 반응형이 된다.
• 객체 내 다른 함수에서 this 키워드를 통해 접근 가능하다.
• 화살표 함수 사용시 Vue 인스턴스를 가리키지 않는다.

var data = { a: 1 }

// direct instance creation
var vm = new Vue({
  data: data
})
vm.a // => 1
vm.$data === data // => true

// must use function when in Vue.extend()
var Component = Vue.extend({
  data: function () {
    return { a: 1 }
  }
})

---

props

• 부모 컴포넌트로 부터 전달된 data
• type(타입), default(초기값), required(필수 여부), validator(전처리) 사용이 가능

// simple syntax
Vue.component('props-demo-simple', {
  props: ['size', 'myMessage']
})

// object syntax with validation
Vue.component('props-demo-advanced', {
  props: {
    // type check
    height: Number,
    // type check plus other validations
    age: {
      type: Number,
      default: 0,
      required: true,
      validator: function (value) {
        return value >= 0
      }
    }
  }
})

---

propsData

• 보통 부모 컴포넌트에게 props를 받는 컴포넌트를 테스트할 때 사용한다.
• 주로 단위테스트를 쉽게 하기 위해 사용한다.

var Comp = Vue.extend({
  props: ['msg'],
  template: '<div>{{ msg }}</div>'
})

var vm = new Comp({
  propsData: {
    msg: 'hello'
  }
})

---

computed

• data를 기반으로 하는 계산된 속성을 의미한다.
• 함수의 형태로 정의하지만, 함수가 아닌 함수의 반환 값이 바인딩된다.
• 종속된 대상을 따라 캐싱된다.
• 종속된 대상이 변경될 때만 함수를 실행한다.
• 반드시 반환값이 존재해야 한다.

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // get only
    aDouble: function () {
      return this.a * 2
    },
    // both get and set
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

---

methods

• Vue 인스턴스에 추가할 메서드 정의
• 객체 내 다른 함수에서 this 키워드를 통해 접근 가능하다.
• 화살표 함수 사용시 Vue 인스턴스를 가리키지 않는다.

var vm = new Vue({
  data: { a: 1 },
  methods: {
    plus: function () {
      this.a++
    }
  }
})
vm.plus()
vm.a // 2

---

watch

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

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
    // string method name
    b: 'someMethod',
    // the callback will be called whenever any of the watched object properties change regardless of their nested depth
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // the callback will be called immediately after the start of the observation
    d: {
      handler: 'someMethod',
      immediate: true
    },
    // you can pass array of callbacks, they will be called one-by-one
    e: [
      'handle1',
      function handle2 (val, oldVal) { /* ... */ },
      {
        handler: function handle3 (val, oldVal) { /* ... */ },
        /* ... */
      }
    ],
    // watch vm.e.f's value: {g: 5}
    'e.f': function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

---

computed VS methods

• computed 속성은 종속 대상을 따라 캐싱된다.
• methods 속성은 렌더링 할 때마다 항상 함수를 실행한다.

=> 캐싱이 필요하다면 computed에 선언하여 사용하도록 하자.

computed VS watch

computed

• 특정 데이터를 사용/가공하여 다른 값으로 만들고 싶을때 사용한다.
• 계산해야 하는 목표 데이터를 정의하는 방식이다.(선언형 프로그래밍)
• 특정 값이 변하면 새로 계산해서 새로운 값을 얻어낸다.

watch

• 특정 데이터의 변화 상황에 맞춰 다른 data 등이 바뀌어야 할 때 주로 사용
• 감시할 데이터를 지정하고, 데이터가 바뀌면 콜백 함수를 지정하는 방식이다.(명령형 프로그래밍)
• 특정 대상이 변경되었을 때 콜백함수를 실행 시키기 위한 trigger
• 특정 값이 변하면 다른 작업을 한다.

---

[참고문서]
https://v2.vuejs.org/v2/api/#Options-Data
https://5-ssssseung.tistory.com/100