Jacob Ko

Jacob Ko

Everything is Awesome 👍

04.Vue.js Composition API

Updated:

1.Composition API 가 필요한 이유

Composition API 자세히 보기..

  • Compotision API 가 필요한 경우 code
<template>
  <h1 @click="increase">
    8 / 
  </h1>
  <h1>
     / 
  </h1>
</template>

<script>
export default { 
  data() { // 1,2번 logic 이 동시에 사용되는데, 만약 이보다 복잡한 logic 과 그 참조하는것들이 여기저기 섞이게 되면 코드를 해석 하는 데 어려움..
    return {
      message: 'Hello world!', // 1번 logic
      count: 0 // 2번 logic
    }
  },
  computed: {
    doubleCount() { //2번 logic 참조
      return this.count * 2
    },
    reversedMessage() { // 1번 logic 참조
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    increase() { // 2번 logic 참조
      this.count += 1
    }
  }
}
</script>
  • 즉, 1,2번 logic 을 여러범 참조하고 코드가 복잡해지면 코드를 이해하고 해석하는데 어려움이 있기 때문에 Composition API 를 통해서 간소화, 직관적으로 code 를 만들 수 있습니다.
<template>
  <h1 @click="increase">
    8 / 
  </h1>
  <h1>
     / 
  </h1>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const message = ref('Hello World') // 1번 logic 을 모아서 관련된 method 와 computed 를 모아서 사용
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('')
    })

    const count = ref(0) // 2번 logic 을 모아서 관련된 method 와 computed 를 모아서 사용
    const doubleCount = computed(() => count.value * 2)
    function increase() {
      count.value += 1
    }
    
    return { // 정리된 내영을 한번에 반환 해줌
      message,
      reversedMessage,
      count,
      doubleCount,
      increase
    }
  }
}
</script>

2.반응형 데이터(반응성)

  • 코드를 최적하기 위해서 setup() 이라는 함수안에 Composition API 를 만들어서 활용할 수 있습니다. 이렇게 하면 setup() 안의 함수는 기본적인 변수는 반응성을 가지지 않기 때문에 화면에 출력이 안됩니다

  • 그래서 vue 라는 package 에서 ref 라는 기능을 가져 와서 함수 처럼 실행하면, 그 함수에서 반응성을 가지고 있는 객체 데이터를 return 하게 되고, 객체 데이터 내부의 value 라는 속성을 통해서 함수에서 사용되는 초기 값이 적용되는 구조입니다.

<template>
  <div @click="increase">
    8
  </div>
</template>

<script>
import { ref } from 'vue' // ref 라는 pacage 가져와서 반응성 적용

export default {
  setup () { // Composition API 작성
    let count = ref(0)  // 데이터값에 단순이 0이 아닌 ref 라는 함수에 0을 할당함 -> 반응성을 가지는 객체 data 가 return 됨
    function increase() { 
      count.value += 1 // count.value 라는 속성을 통해 ref(0) 안의 0을 출력하게 됨
    }

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

3.기본 옵션과 라이프사이클

  • 일반적인 vue 코드
<template>
  <h1 @click="increase">
    8  / 
  </h1>
  <h1 @click="changeMessage">
     / 
  </h1>
</template>


<script>
export default {
  data() {
    return {
      count: 0,
      message: 'Hello world!'
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    },
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    message(newVlaue) {
      console.log(newVlaue)
    }
  },
  created() { //component 가 생성된 직후에 실행되는 life cycle
    console.log(this.message)
  },
  mounted() { //  HTML 이 실제 연결된 직후에 실행되는 life cycle
    console.log(this.count)
  },
  methods: {
    increase() {
      this.count += 1
    },
    changeMessage() {
      this.message = 'Good?!'
    }
  }
}
</script>
  • 같은 내용이지만, Composition API를 사용해서 코드를 사용하는 것
<template>
  <h1 @click="increase">
    8  / 
  </h1>
  <h1 @click="changeMessage">
     // 
  </h1>
</template>


<script>
import { ref, computed, watch, onMounted } from 'vue' // mounted  lifecycle 을 가져오는거는 onMounted
// counted()  가져오는것은 없기 때문에, setup() logic  이 끝나고 실행하기 때문에 따로 가져올거는 없음 -> 내부 어디에서든지 실행하면 됨
export default {
  setup() { // 반응성을 가지는 ref 에서 value 값을 할당해서 사용해야 함
    const count = ref(0)
    const dubleCount = computed(() => {
      return count.value * 2
    })
    function increase() {
      count.value += 1
    }


    const message = ref('Hello world')
    const reversedMessage = computed(() => {
      return message.value.split('').reversed().join('')
    })
    watch(message, newValue => { // 감시하고자 하는 데이터를 명시
      console.log(newValue)
    }) 
    function changeMessage() {
      message.value = 'Good?!'
    }
    console.log(message.value) // created() 을 사용하는것과 같음

    onMounted(() => {
      console.log(count.value)
    })

    return {
      count,
      increase,
      dubleCount,
      message,
      reversedMessage,
      changeMessage

    }
  }
}
</script>

Life cycle hook

lifeCycle hook 자세히 보기..

  • 라이프 사이클 훅에 접두사 “on” 을 추가함으로써 컴포넌트의 라이프사이클 훅에 접근할 수 있습니다.

image

  • 📌 위에 표에 나와 있듯이 beforeCreate, created 는 setup 내부의 훅이 필요하지 않고 바로 사용할 수 있습니다.

image

  • 결론, Composition API 는 조금더 logic 이 복잡하고, 많은 내용이 섞여져 있는 Component 내부에서 기존의 내용을 직관적으로 만들어 줄수 있습니다. 필요의 따라서 코드를 최적화해서 작성 할 수 있습니다.

4.Props, Context

  • 기존의 props, context 를 Composition API 형태로도 만들 수 있습니다.
// in App.vue

<template>
  <MyBtn
    class="jacob"
    style="color: red;"
    color="#ff0000"
    @hello="log">
    Apple
  </MyBtn>
</template>

<script>
import MyBtn from '~/components/MyBtn'

export default {
  components: {
    MyBtn
  },
  methods: {
    log() {
      console.log('Hello world')
    }
  }
}
</script>

// in MyBtn.vue 

<template>
  <div
    v-bind="$attrs"
    class="btn"
    @click="hello">
    <slot></slot>
  </div>
</template>

<script>
import { onMounted } from 'vue'

export default {
  inheritAttrs: false,
  props: {
    color: {
      type: String,
      default: 'gray'
    }
  },
  emits: ['hello'],
  setup(props, context){
    function hello(){
      context.emit('hello')
    }
    onMounted(() => {
      console.log(props.color) // 위의 this.color 와 같은 값임
      console.log(context.attrs) // 위의  this.$attrs 와 같은 참조인데 주의 할 점은 attrs 의 $ 표시를 상용하지 않고 그냥 사용하기
    })

    return {
      hello
    }
  }
}
</script>

🔶 🔷 📌 🔑

Reference

Categories:

Updated:

Leave a comment

You may also enjoy