Vue3 > export default setup() 과 script setup 주요 차이점

export default setup()

<script>
export default {
  setup() {
    // 컴포지션 API 코드
    const message = ref('Hello')
    
    const doubleMessage = computed(() => message.value + message.value)
    
    function updateMessage() {
      message.value = 'Updated'
    }

    // setup()에서는 반환값을 명시적으로 지정해야 합니다
    return {
      message,
      doubleMessage,
      updateMessage
    }
  }
}
</script>

 
<script setup>

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

// 변수와 함수를 직접 선언하면 자동으로 템플릿에서 사용 가능
const message = ref('Hello')

const doubleMessage = computed(() => message.value + message.value)

function updateMessage() {
  message.value = 'Updated'
}
</script>

 
props 와 emit

// setup()
export default {
  props: ['title'],
  emits: ['update'],
  setup(props, { emit }) {
    // props와 emit 사용
  }
}

// <script setup>
const props = defineProps(['title'])
const emit = defineEmits(['update'])

 
이제부터 vue3 에서는 <script setup> 사용을 강력히 추천한다.
- 더 간결 - 성능우수 - 타입스크립트 지원
 
<script setup> 기본형태

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

// props 정의
const props = defineProps({
  title: String,
  count: {
    type: Number,
    default: 0
  }
})

// emit 정의
const emit = defineEmits(['update', 'delete'])

const message = ref('Hello')

// props 접근
console.log(props.title)

// emit 사용
const handleClick = () => {
  emit('update', message.value)
}

// 메서드 노출 (expose)
defineExpose({
  publicMethod() {
    console.log('This can be accessed from parent')
  }
})

onMounted(() => {
  console.log('Component mounted')
})
</script>