vue3 문법 [컴포지션API]

코드의 양이 많고 복잡한 코드를 간단하게 정리해줄 수 있다.

 

깔끔하게 정리할 수 있다

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

<script>
export default {
  data() {
    return{
      count:0
    }
  },
  methods : {
    increase() {
      this.count +=1
    }
  }
}
</script>

이 코드를 컴포지션해서 작성하면 다음과 같이 작성할 수 있다.

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

<script>
import {ref} from 'vue'
export default {
  setup(){
    let count = ref(0)
    function increase() {
      count.value +=1
    }
    return {
      count,
      increase
    }
  }
}
</script>

<template>
  <h1 @click="increase">
    {{ count }} / {{ doubleCount }}
  </h1>
  <h1 @click="changeMesaage">
    {{ message }} / {{ reversedMessage }}
  </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(newValue) {
      console.log(newValue)
    }
  },
  created(){
    console.log(this.message)
  },
  mounted(){
    console.log(this.count)
  },
  methods: {
    increase() {
      this.count +=1
    },
    changeMessage() {
      this.message='Good?!'
    }
  }
}
</script>

컴포지션API 전

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


<script>
import {ref,computed,watch,onMounted} from 'vue'
export default {
  setup() {
    const count =ref(0)
    const doubleCount = computed(() => {
      return count.value*2
    })
    const message = ref('Hello world!')
    const reversedMessage = computed(() => {
     return message.value.split('').reverse().join('')
    })
    watch(message, newValue => {
      console.log(newValue)
    })
    function increase() {
      count.value +=1
    }
    function changeMesaage() {
      message.value='Good?!'
    }
    console.log(message.value)

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

    return {
      count,
      message,
      increase,
      changeMesaage,
      doubleCount,
      reversedMessage,
    }
  }
}
</script>

컴포지션API 후