Vue.js computed & mixin & filter

1. computed

: 템플릿 내 표현식을 간소화

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

-> 템플릿에 너무 많은 논리를 넣으면 유지 관리가 어려워진다
-> computed 사용

computed

<div id="example">
 <p>Original message: "{{ message }}"</p>
 <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

---

method

<p>Reversed message: "{{ reverseMessage() }}"</p>

// in component
methods: {
  reverseMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

method vs computed

computed

-> 종속성 기반으로 캐시된다
-> message가 변하지 않으면 computed의 reverseMessage에 대한 호출은 함수를 다시 실행할 필요 없이 이전에 계산된 결과를 즉시 반환

method

-> 항상 함수 실행

큰 배열을 반복 & 많은 계산을 수행하는 계산 속성 -> computed가 유리

computed 제한 사항
1. template에서 호출시 ()를 적지 않아야 된다.
2. return 값이 반드시 존재해야한다.
3. parameter를 받을 수 없다.
(+) 해당 로직이 필요한 컴포넌트들에 모두 코드를 작성해야 한다
-> mixins 사용

2. mixins

Local mixins

reverseMixin.js

export const reverseMixin = {
  data() {
    return {
      message: 'Hello'
    }
  },
  computed: {
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
}

-> js 파일에 공통으로 추가하고자 하는 코드 작성

....vue

<template>
  <div>
    <p>Computed reversed message: "{{ reversedMessage }}"</p>
  </div>
</template>

<script>
import { reverseMinxin } from './reverseMixin';

export default {
  mixins: [reverseMixin]
}
</script>

-> import를 통해 mixin 삽입 후 사용
-> 필요한 component마다 import 필요

Global mixins

-> main.js에서 Vue.mixin으로 생성

import Vue from 'vue'
import App from './App.vue'

Vue.mixin({
  created() {
    ...
  },
  computed: {
    ...
  },
   ...
})

new Vue({
  el: '#app',
  render: h => h(App)
})

-> global mixin은 모든 component에 추가된다
-> 한 페이지에 component가 2개 사용되면 global mixin은 3번 호출
-> vue.js 공식 문서에서 웬만하면 local로 필요한 곳에서 사용하라고 추천

3. Filter

Vue는 텍스트 형식화를 적용할 수 있는 필터를 지원
중괄호 보간법 혹은 v-bind표현법 을 이용할 때 사용가능

파이프 심볼 + 필터 ( | filterFunc)

Local Filter

<!-- 중괄호 보간법 -->
{{ message | capitalize }}

<!-- v-bind 표현 -->
<div v-bind:id="rawId | formatId"></div>

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

Global Filter

main.js

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

상황에 따른 적절한 방식 선택 필요!