Vue3 : Composition API(생명주기 훅)

Opitons API        =>       Composition API

beforeCreate, created => 필요없음

beforeMount, mounted => onBeforeMount, onMounted

beforeUpdate, updated => onBeforeUpdate, onUpdated

beforeUnmount, unmounted => onBeforeUnmount, onUnmounted

<script>
import { computed, 
        onBeforeMount, 
        onMounted, 
        onBeforeUpdate, 
        onUpdated, 
        onBeforeUnmount, 
        onUnmounted } from 'vue';

export default {
 props: ['firstName', 'lastName', 'age'],
 setup(props, context) {
   const uName = computed(function() {
     return props.firstName + ' ' + props.lastName;
   };
  
  onBeforeMount(function() {
    console.log(onBeforeMount);
  });
  
  onMounted(function() {
    console.log(onMounted);
  });
  
  onBeforeUpdate(function() {
    console.log(onBeforeUpdate);
  });
  
  onUpdated(function() {
    console.log(onUpdated);
  });
  
  onBeforeUnmount(function() {
    console.log(onBeforeUnmount);
  });
  
  onUnmounted(function() {
    console.log(onUnmounted);
  });
  
  return { userName: uName };
 
 }
}

</script>