기본 옵션과 라이프 사이클

무조건 컴포지션 API를 사용해야할까?

저번 예시처럼 ref를 불러와서 컴포지션 API를 적용한 모습. 코드가 단순하다면 굳이 이렇게 최적화를 해야할까? 그렇지 않다. 오히려 단순한 경우에 컴포지션 API로 작성한다면 코드를 더 많이 사용해야한다. 상황에 맞게 사용해야한다.

App.vue

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <h1 @click="changeMessage">
    {{ count }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      message: 'Hello world!'
    }
  }
}
</script>

App.Composition.vue

<template>
  <h1 @click="increase">
    {{ count }}
  </h1>
  <h1 @click="changeMessage">
    {{ count }}
  </h1>
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    let count = ref(0)
    let message = ref('hello world!')

    return {
      count,
      message
    }
  }
}
</script>

Vue Composition API Life Cycle hook

setup은 beforeCreate, created 라이프사이클 훅 사이에 실행되는 시점이므로(beforeCreate()가 setup() 직전에 호출되고 created()가 setup() 직후에 호출되는 타이밍을 가짐), 명시적으로 정의할 필요가 없다. 다시말해, 위 두 훅에서 작성되는 모든 코드는 setup funtion 내부에 직접 작성해야한다.

출처: vue 공식문서

Vue vs Vue Composition API

무조건 Vue Composition API가 좋다고 할 수 없다! 최적화를 위해 사용하는 것 알아두기!

App. vue

<template>
  <h1 @click="increase">
    {{ count }} / {{ dobleCount }}
  </h1>
  <h1 @click="changeMessage">
    {{ message }} / {{ reversedMessage }}
  </h1>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      message: 'Hello world!'
    }
  },
  computed: {
    dobleCount() {
      return this.count * 2
    },
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    message(newValue) {
      console.log(newValue)
    }
  },
  created() {
    console.log(this.message)
  },
  mounted() {
    console.log(this.message) 
  },
  methods: {
    increase() {
      this.count += 1
    },
    changeMessage() {
      this.message = "good?"
    }
  }
}
</script>

App.Composition.vue

<template>
  <h1 @click="increase">
    {{ count }} / {{ dobleCount }}
  </h1>
  <h1 @click="changeMessage">
    {{ message }} / {{ reversedMessage }}
  </h1>
</template>

<script>
import { ref, computed, watch, onMounted } from 'vue'
export default {
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => {
      return count.value * 2
    })
    function increase() {
      count.value += 1
    }

    const message = ref('hello world!')
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('')
    })
    watch(message, newValue => {
      console.log(newValue)
    })
    function changeMessage() {
      message.value = 'good?'
    }
    // create life cycle과 동일
    console.log(message.value)
    
    onMounted(() => {
      console.log(count.value)
    }) 
    return {
      count,
      doubleCount,
      increase,
      message,
      changeMessage,
      reversedMessage
    }
  }
}
</script>