티스토리 뷰

개발 노트

[vue.js] computed 속성 사용하기

2020. 3. 11. 16:36

computed 속성을 사용하는 예제입니다.

 

 

Computed Properties - Intro to Vue.js | Vue Mastery

In this lesson, we’ll be covering Computed Properties. These are properties on the Vue instance that calculate a value rather than store a value.

www.vuemastery.com

 

<!DOCTYPE html>
<html>
    <head>
        <title>App</title>
        <link rel="stylesheet" type="text/css" href="./style.css">
    </head>
    <body>
        <div class="nav-bar"></div>
        <div id="app">
            <div class="product">
                <div class="product-image">
                    <img v-bind:src="image"/>
                </div>
            </div>
            <div class="product-info">
                <h1>{{ title }}</h1><span v-show="onSale">On Sale!</span>
                <p v-if="inStock">In Stock</p>
                <p v-else>Out of Stock</p>

                <ul>
                    <li v-for="detail in details">{{ detail }}</li>
                </ul>

                <div class="color-box"
                    v-for="(variant, index) in variants" 
                    :key="variant.variantId"
                    :style="{backgroundColor: variant.variantColor}"
                    @mouseover="updateProduct(index)"
                    >
                </div>

                <button v-on:click="addToCart"
                :disabled="!inStock"
                :class="{ disabledButton: !inStock }"
                >Add to cart</button>
                <div class="cart">
                    <p>Cart({{ cart }})</p>
                </div>
            </div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="main.js"></script>
    </body>
</html>

기존 코드에서 불필요한 데이터를 제거했습니다.

그리고 예제와 다르게 ES6 문법인 템플릿 문법을 사용해서 title를 노출하도록 했습니다.

var app = new Vue({
    el: '#app',
    data: {
        brand: 'Vue Mastery',
        product: 'Socks',
        selectedVarint: 0,
        onSale: false,
        details: ["80% cotton", "20% polyester", "Gender-neutral" ],
        variants: [
            {
                variantId: 2234,
                variantColor: "green",
                variantImage: "./assets/vmSocks-green-onWhite.jpg",
                variantQuantity: 10
            },
            {
                variantId: 2235,
                variantColor: "blue",
                variantImage: "./assets/vmSocks-blue-onWhite.jpg",
                variantQuantity: 0
            }
        ],
        cart: 0,
    },
    methods: {
        addToCart(){
            this.cart +=1
        },
        updateProduct(index){
            this.selectedVarint = index
        }
    },
    computed: {
        title(){
            return `${this.brand} ${this.product}`
        },
        image(){
            return this.variants[this.selectedVarint].variantImage
        },
        inStock(){
            return this.variants[this.selectedVarint].variantQuantity
        },
    }
})

computed로 선언한 메소드는 메서드 안에 선언된 데이터에 변경이 발생할 때만 업데이트됩니다. 변경되지 않으면 기존에 캐시 된 데이터를 반환합니다. 그렇기 때문에 불필요한 연산을 막을 수 있습니다.

하지만 이러한 속성을 잘 알고 사용해야 합니다. 만약 computed 메소드 내부 안에 업데이트될 데이터가 없다면 그 메서드는 영원히 같은 값을 반환합니다. 자세한 내용은 공식문서를 참고하세요.

댓글