common.js

// 컴포지션 API의 reactive를 통해 생성할 수 있으며 오직 객체만 받습니다.
// reactive는 인자로 받은 객체와 완전히 동일한 프록시 객체를 반환하고,
// 생성된 객체는 Vue 2의 Vue.observable()로 생성한 것과 동일

//ref 객체는 원본 값을 value라는 속성에 담아두고 변경을 감시하는 객체이며,
//reactive는 원본 객체 자체에 변경을 감지하는 옵저버를 추가하여 그대로 반환한 값

//reactive 값을 ref 값으로 변환하는 toRefs
/**
 * 1. (value:원본값 )   형식 : ref
 * 2. (원본값 : __ob__) 형식  : reactive
 *
*/
import { reactive, computed, ref, toRefs } from 'vue';

const plusCalculator = () => {
    let state = reactive({
        num1: 0,
        num2: 0,
        result: computed(() => parseInt(state.num1) + parseInt(state.num2))
    });
    // toRefs 반응형 변수          
    return toRefs(state);
}

export {
    plusCalculator
}

 

API.vue

<template>
    <div>
        <h2>Calculator</h2>
        <div>
            <input type="number" v-model="num1" @keyup="plusNumbers" />
            <span> + </span>
            <input type="number" v-model="num2" @keyup="plusNumbers" />
            <span> = </span>
            <span>{{result}}</span>
        </div>
    </div>
</template>

<script>
    import {
        plusCalculator
    } from '@/common/common.js'

    export default {
        name: 'calculator',

        setup() {
            let { num1,num2,result} = plusCalculator();
            return {
                num1,num2,result
            }
        }

    }
</script>