[JavaScript][Vue.js] computed 사용법

computed는 종속되어있는 값(age)가 바뀌면 자동으로 본인도 값을 바꿔준다

사용방법은 다음 코드와 같다.

<!-- vue 3.0 불러오기 -->
<script src="https://unpkg.com/vue@next"></script>

<div>20살이 넘으면 성년이 true로 바뀌게 만드는 코드(computed 사용)</div>
<hr>
<div id="vue-app">
    이름 : {{name}}
    <br>
    나이 : {{age}}
    <br>
    성년 : {{isAdult}}
</div>

 

const VueApp = {
    setup() {
        const name = "wjxor";
        const age = Vue.ref(1);
        const isAdult = Vue.computed(()=> age.value >= 20);

        setInterval(() => {
            age.value = age.value + 1;
            
            isAdult.value = age.value >= 20;
        }, 1000);
        
        return {
            name,
            age,
            isAdult
        }
    }
};

Vue.createApp(VueApp).mount('#vue-app');