[vue2] 컴포넌트 옵션

개요

뷰의 스크립트 블록에서는 다음과 같이 옵션 객체를 내보냅니다.

각 옵션들을 필요에 맞게 정의할 수 있어야 합니다.

<script>
import OtherComponent from "./OtherComponent"  // 현재 컴포넌트에서 다른 컴포넌트를 사용하기 위해 import

export default {
  name: 'HelloWorld',         // 컴포넌트의 이름
  components: { OtherComponent },  // 사용할 컴포넌트들
  props: { /* ... */ },       // 부모 컴포넌트로부터 받는 데이터
  data(){ /* ... */ },        // 변수들
  computed: { /* ... */ },    // 계산된 속성
  watch: { /* ... */ },       // 감시자
  methods: { /* ... */ },     // 메서드들  
  mounted(){ /* ... */ },     // 라이프사이클 훅
  created(){ /* ... */ },     // 라이프사이클 훅
  /* ... */
}
</script>

각 옵션에 대한 설명은 다음 링크를 통해 확인해 보시기 바랍니다.

Component Options

선언하는 옵션의 순서는 일관성 있게 유지만 하면 된다고 생각하지만,

공식문서에서 권장하는 순서를 다음 링크에서 확인할 수 있습니다.

Component/instance options order

computed VS methods

일반적으로 컴포넌트를 제어하는 데 필요한 메서드는 methods 옵션에서 정의합니다.

하지만 렌더링에 필요한 데이터를 연산하는 함수와 같이,

데이터의 캐싱이 필요한 함수는 computed에 정의하는 것이 좋습니다.

computed에 정의된 함수는 속성 중 일부가 변경되었을 때만 재실행되고,

변경되지 않았을 때에는 캐싱되어 있던 데이터를 즉시 반환합니다.

다음 컴포넌트에서 computed의 속성인 filteredMsg는 messages의 변경을 감지해 실행됩니다.

8번 라인과 9번 라인, 34 ~ 37 라인과 40 ~ 43번 라인을 수정해서 테스트 해 보세요.

( + 버튼 클릭을 하고 콘솔을 비교해 보시면 됩니다 )

<template>
  <div>
    <button @click="appendMsg()">AppendMsg</button>
    <button @click="increase()">+</button>
    <h1>{{count}}</h1>

    <ul>
      <!-- <li v-for="(item, idx) in filteredMsg()" :key="idx"> -->
      <li v-for="(item, idx) in filteredMsg" :key="idx">
        {{item.msg}}
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    name:'Test',
    data(){
      return {
        messages: [
          {
            sender: "bit",
            msg: 'Hello chan'
          },
          {
            sender: "chan",
            msg: 'Hello bit'
          },
        ],
        count: 0,
      }
    },
    computed: {
      filteredMsg () {
        console.log("filteredMsg 함수 실행");
        return this.messages.filter((msg)=> msg.sender ==="bit");
      }
    },
    methods: {
      // filteredMsg () {
      //   console.log("filteredMsg 함수 실행");
      //   return this.messages.filter((msg)=> msg.sender ==="bit");
      // },
      appendMsg(){
        this.messages = [...this.messages, {sender:"bit", msg:"I'm bit"}]
      },
      increase(){
        this.count++;
      },
    }
  }
</script>
<style>
button{
  margin: 1rem;
}
</style>

watch

watch옵션은 data의 변경이 일어났을 때 호출된다는 점에서 computed와 많이 비교됩니다.

대부분의 경우 렌더링 요소에 대한 제어와 동작은 computed 옵션과 methods 옵션을 통해 가능합니다.

watch옵션의 경우 공식 문서에서의 설명처럼 ‘데이터 변경에 따른 함수 호출 시 디바운싱 처리가 필요할때'

( 하지만, 아래의 디바운싱 처리도 onChange속성과 methods 옵션을 통해 구현할 수는 있습니다 )

<template>
  <input v-model="lastName" />
</template>
<script>
  data(){
    return {
      lastName: ""
    }
  },
  watch:{
    lastName (val) {
      debounceFunc(fetchFunc(val), 1000); // 임의의 디바운싱 함수
    }
  },
  methods: {
    fetchFunc () { // 디바운싱 처리가 필요한 함수
      ...
    },
    ...
  }
</script>

혹은 ‘변경 전의 값에 손쉽게 접근하고 싶을 때’ 유용한 것으로 판단됩니다.

<template>
  <input v-model="lastName" />
</template>
<script>
  data(){
    return {
      lastName: ""
    }
  },
  watch:{
    lastName (val, oldVal) {
      doSomething(val, oldVal); // 임의의 함수
    },
  },
  ...
</script>

https://v2.vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods