Vue3 : Composition API (methods, computed, watch)

methods 대체

<button @click="setAge"><button>

export default {
    setup() {
      function setNewAge() {
        user.age = 32;
      }

      return {setAge: setNewAge}
     }
}

computed, v-model

<div>
  <input type="text" placeholder="First Name" @input="setFirstNmae" />
  <input type="text" placeholder="Last Name" @input="setLastName" />
</div>

// v-model 사용 가능
<div>
  <input type="text" placeholder="First Name" v-model="setFirstNmae" />
  <input type="text" placeholder="Last Name" v-model="setLastName" />
</div>

import { ref, computed } from 'vue';

export default {
    setup() {
      const firstName = ref('');
      const lastName = ref('');

	  function setFirstName(event) {
        firstName.value = event.target.value;
      }
      
      function setLastName(event) {
        lastName.value = event.target.value;
      }
      
      const uName = computed(function() {
        return firstName.value + ' ' + lastName.value;        
      });
      
      return { 
          userName: uName, 
          setFirstName, 
          setLastName,
          firstName,
          lastName
        }
     }
}

watcher 활용

import { ref, watch } from 'vue';

export default {
 setup() {
    const firstName = ref('');
    const lastName = ref('');
    
    const uName = computed(function() {
       return firstName.value + ' ' + lastName.value;        
    });
      
    // 첫번째 인수는 함수 의존성, uAge, uName 중 하나가 변화하면 function 실행 됨
    watch([uAge, uName], function(newValues, oldValues) {
      console.log('Old age: ' + oldValues[0]);
      console.log('New age: ' + newValues[0]);
      
      console.log('Old name: ' + oldValues[1]);
      console.log('New name: ' + newValues[1]);
    });

 
 }
}