Vue3 정복기(10일차 - 2 )

컴포지션 API

기존 data를 이용한 vue

필요에 따라서 사용할수있다. 기본적으로 큰 프로젝트라면 컴포지션 api 사용 권장

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

<script>
export default {
  data() {
    return {
      count: 0,
      message: 'Hello World!'
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    },
    reverseMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    message(newValue) {
      console.log(newValue)
    }
  },
  // 컴포넌트가 생성 후
  created() {
    console.log(this.message)
  },
  // html과 컴포넌트가 연결 된 후
  mounted () {
    console.log(this.count)
  },
  methods: {
    increase() {
      this.count += 1
    },
    changeMessage() {
      this.message = 'Good?!'
    }
  }
}
</script>

위 내용을 컴포지션 API이용

created는 setup 매소드랑 동일시점으로 사용되서 onCreated는 없다. 그냥 안에 적는다.

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

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

export default {
  // setup과 created 둘다 컴포넌트가 생성된 직후라서 바로 안에서 작성한다.
  setup() {
    const count = ref(0)
    const doubleCount = computed(() => {
      return count.value * 2
    })
    function increase() {
      count.value += 1
    }

    const message = ref('Hello World!')
    const reverseMessage = computed(() => {
      return message.value.split('').reverse().join('')
    })
    watch(message, newValue => {
      console.log(newValue)
    })
    function changeMessage() {
      message.value = 'Good?!'
    }
    // created 라이프사이클을 사용하는거랑 똑같다.
    console.log(message.value)

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

    return {
      count,
      doubleCount,
      increase,
      message,
      reverseMessage,
      changeMessage,
    }
  }
}
</script>

Props, Context

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

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

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

MyBtn

Props, context이용한 컴포지션 API
setup 매소드를 이용하여 만들며 $emit, $attrs는 사용할때 context.emit , context,attrs로 받아야한다.

<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')
    }

    // console.log(this.color)
    // console.log(this.$attrs)
    onMounted(() => {
      console.log(props.color)
      console.log(context.attrs)
    })

    return {
      hello
    }
  }
}
</script>
```vue