Vue, Options API VS Composition API

Options API ~  Vue3	Composition API, setup() hook Vue3	Composition API, Sugar syntax Vue3.2 ~
<script> import { ... } from '@/....js'; import ChildCmp from '@/....vue'; export default{   beforeRouteEnter(to, from, next) {     next((vm) => {       ...     });   },   beforeRouteUpdate(to, from) {     ...   },   beforeRouteLeave(to, from) {     ...     return true; // false   },   components: {     ChildCmp,   },   provide() { // ParentCmp 에 기술     return {       msgPrIn: this.msgData,     }   },   inject: [  // ChildCmp 에 기술. emits 와 형식 유사     'msgPrIn',   ],   props: { // ChildCmp 에 기술     msgProps,   },   emits: [ // ChildCmp 에 기술. inject 와 형식 유사     'foo1',   ],   data() { // data: function() { ... },     const query1 = this.$route.query.query1; // ?query1=...     const param1 = this.$route.params.param1; // router 에 동적 경로 적용시     return {       msgData,       query1, param1,     }   },   computed: { // methods 와 형식 유사     foo1() { // ParentCmp 에 기술된 함수       ...     },   },   watch: {     식별자(newValue, oldValue) {       ...     },   },   beforeCreate(): {   },   created(): {   },   beforeMount(): {   },   mounted(): {   },   beforeUpdate(): {   },   Updated(): {   },   beforeUnmount(): {   },   unmounted(): {   },   beforeDestroy(): {   },   destroyed(): {   },   methods: { // computed 와 형식 유사     foo2() {       this.$emit('foo1');  // ChildCmp 에 기술       // this.$router.push('/'); // replace('/'), go(-1), go(1), forward(), back()     },   }, } </script> <template>   <ChildCmp : @foo1="foo1" />   <ChildCmp : @="() => foo1()" />  </template>	<script> export default{   // components, provide/inject, props/emits 등은 Options API 와 동일   setup(): {     return { // Optional API 에서 재사용시 기술       ...     };   },   // data(), computed, watch, 각종 hook 핸들러, methods 등은 Optional API 와 동일 } </script>	<script setup> import { ref, reactive }  from 'vue'; import { provide, inject }  from 'vue'; import { defineEmits }  from 'vue'; import { computed, watch }  from 'vue'; import { watchEffect, watchPostEffect  }  from 'vue'; import { on... } from 'vue'; import { useRoute, useRouter } from 'vue-router'; import ChildCmp from '@/....vue'; // components 기술하지 않음 // onBeforeRouteUpdate(); // onBeforeRouteEnter() 는 없음 // onBeforeRouteLeave(); provide('msgProvide', ...); // ParentCmp 에 기술 const msgChild = inject('msgProvide', 'default value'); // ChildCmp 에 기술 const props = defineProps({   ..., }); const emits = defineEmits([   'foo1', ]); // setup() 이나 data() 에 사용되는 요소 기술 const route = useRoute(); const query1 = route.query.query1; const param1 = route.params.param1; const router = useRouter(); // router.push('/'); const 식별자 = ref(값); // 참조 자료형 지양. DOM 요소 접근, optional 에서는 $refs.식별자 const 식별자 = reactive(값); // 참조 자료형 const 식별자 = computed(() => {   return ...; }); watch(식별자, ( newValue, oldValue ) => { // watch 여러번 기술   ...; }); watchEffect(() => {   ...; }); watchPostEffect(() => {   ...; }); // beforeCreate 는 setup 영역으로 대체 // created 는 setup 영역으로 대체 onBeforeMount(() => { ... }); onMounted(() => { ... }); onBeforeUpdate(() => { ... }); onUpdated(() => { ... }); onBeforeUnmount(() => { ... }); onUnmounted(() => { ... }); const foo1 = () => {  // ParentCmp 에 기술된 함수   ... }; const 식별자 = () => { // methods 기술   emits('foo1'); }; defineExpose({ // ChildCmp 에 기술   ..., // ParentCmp 에 노출할 요소 }); // Optional API 에서는 불필요 </script>