[vue3] component api 적용/미적용 예제

// 컴포넌트 api적용 XXX

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

 

//컴포넌트 API 적용 OO

<template>
  <h1 @click="increase">
    {{ count }} 
  </h1>
  <h1 @click="changeMessage">
    {{ 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
    })
    function increase(){
      count.value +=1
    }

    const message = ref('Hello World!!')
    const reversedMessage = computed(()=>{
      return message.value.split('').reverse().join('')
    })
    watch(message,newVal =>{
      //message.value XX
      console.log(newVal)
    })
    function changeMessage(){
      message.value = 'Good?' 
    }

    // created는 별도로 가져오지않고
    // setup 어디에서든 가능!
    // vuejs 사이트 내의 라이프사이클 훅에서도 확인할수있음
    console.log(message.value)
    
    onMounted(()=>{
      console.log(count.value)
    })

    return{
      count,
      doubleCOunt,
      increase,

      message,
      changeMessage,
      reversedMessage
    }
  },
}
</script>