Written by 최태열
on January 22, 2021

Vue computed

computed

하나의 input tag에 여백(space 한번)을 기준으로 “이름 나이” 형식으로 입력면면 이름은 name, 나이는 age에 바인딩

info - 다수의 함수로 구성된 js 객체

이러한 객체가 computed 속성에 등록(구현)되어 있을 경우 set/get 필요로 함

get : 브라우저가 vue 객체 생성하면서 자동 호출

set : model의 데이터 변경시 자동 호출

<div id="app">
    <input type="text" v-model.lazy="info"><br>
    이름 : , 나이 : <br>
    합 
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el : "#app",
        data : {
            name : "김소연",
            age : 20
        },
        computed : {
            info : {
                set : function(v){ // info가 binding 되어 있는 값 수정시 자동 호출
                    this.name = v;
                },
                get : function(v){ // 객체 생성시 자동 호출
                    return "안녕";
                }
            },
            sum : function(){
                //alert(2+3);
                return 2+3;
            }
        }
    });
</script>

sum은 vm객체의 model의 property 처럼 호출하나 computed 속성에 개발된 sum() 함수

methods 속성과의 가장 큰 차이점 : 메소드는 () 필수, computed 속성내에 구현된 함수는 이름으로만 마치 속성 호출하듯 호출

가령 연산 로직이 필요한 경우에 사용하기도 함

Discussion and feedback

← → Top