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>
댓글 ( 4)
댓글 남기기